CSS ﻢﻠﻗ ﻩﺯﺍﺪﻧﺍ

فهرست مطالب

    نمایش فهرست مطالب

ﺖﻧﻮﻓ ﻩﺯﺍﺪﻧﺍ

.ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﻦﺘﻣ ﻩﺯﺍﺪﻧﺍ font-size ﯽﮔﮋﯾﻭ

ﺎﻤﺷ ،ﻝﺎﺣ ﻦﯾﺍ ﺎﺑ .ﺖﺳﺍ ﻢﻬﻣ ﺭﺎﯿﺴﺑ ﺏﻭ ﯽﺣﺍﺮﻃ ﺭﺩ ﻦﺘﻣ ﻩﺯﺍﺪﻧﺍ ﺖﯾﺮﯾﺪﻣ ﯽﯾﺎﻧﺍﻮﺗ

ﯼﺍﺮﺑ <p> ﻭ ﺎﻫ ﻞﺼﻓﺮﺳ ﯼﺍﺮﺑ <h1> - <h6> ﺪﻨﻧﺎﻣ ،ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺐﺳﺎﻨﻣ HTML ﯼﺎﻫ ﮓﺗ ﺯﺍ

ﺪﺷﺎﺑ ﺪﻧﺍﻮﺗ ﯽﻣ ﺖﻧﻮﻓ ﻩﺯﺍﺪﻧﺍ ﺭﺍﺪﻘﻣ

:ﻖﻠﻄﻣ ﻩﺯﺍﺪﻧﺍ

  • ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﯽﺼﺨﺸﻣ ﻩﺯﺍﺪﻧﺍ ﻪﺑ ﺍﺭ ﻦﺘﻣ

  • (ﺪﺑ ﯽﺳﺮﺘﺳﺩ ﻞﯾﻻﺩ ﻪﺑ) ﺪﻫﺩ ﺮﯿﯿﻐﺗ ﺎﻫﺮﮔﺭﻭﺮﻣ ﻪﻤﻫ ﺭﺩ ﺍﺭ ﻦﺘﻣ ﻩﺯﺍﺪﻧﺍ ﺪﻫﺩ ﯽﻤﻧ ﻩﺯﺎﺟﺍ ﺮﺑﺭﺎ

  • ﺪﺷﺎﺑ ﺺﺨﺸﻣ ﯽﺟﻭﺮﺧ ﯽﮑﯾﺰﯿﻓ ﻩﺯﺍﺪﻧﺍ ﻪﮐ ﺖﺳﺍ ﺪﯿﻔﻣ ﯽﻧﺎﻣﺯ ﻖﻠﻄﻣ ﻩﺯﺍﺪﻧﺍ

:ﯽﺒﺴﻧ ﻩﺯﺍﺪﻧﺍ

  • ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﻑﺍﺮﻃﺍ ﺮﺻﺎﻨﻋ ﻪﺑ ﺖﺒﺴﻧ ﺍﺭ ﻩﺯﺍﺪﻧﺍ

  • ﺪﻫﺩ ﺮﯿﯿﻐﺗ ﺎﻫﺮﮔﺭﻭﺮﻣ ﺭﺩ ﺍﺭ ﻦﺘﻣ ﻩﺯﺍﺪﻧﺍ ﺎﺗ ﺪﻫﺩ ﯽﻣ ﻩﺯﺎﺟﺍ ﺮﺑﺭﺎﮐ ﻪﺑ

ﻪﺟﻮﺗ: ﻩﺩﺮﮑﻧ ﺺﺨﺸﻣ ﺍﺭ ﻢﻠﻗ ﻩﺯﺍﺪﻧﺍ ﺮﮔﺍﺶﯿﭘ ﻩﺯﺍﺪﻧﺍ ،ﺪﯾﺍﻑﺍ

ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﻞﺴﮑﯿﭘ ﺎﺑ ﺍﺭ ﻢﻠﻗ ﻩﺯﺍﺪﻧﺍ

:ﺪﻫﺩ ﯽﻣ ﺍﺭ ﻦﺘﻣ ﻩﺯﺍﺪﻧﺍ ﺮﺑ ﻞﻣﺎﮐ ﻝﺮﺘﻨﮐ ﻥﺎﮑﻣﺍ ﺎﻤﺷ ﻪﺑ ﻞﺴﮑﯿﭘ ﺎﺑ ﻦﺘﻣ ﻩﺯﺍﺪﻧﺍ ﻢﯿﻈﻨﺗ

ﻝﺎﺜﻣ

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

ﻪﺘﮑﻧ: ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻞﺴﮑﯿﭘ ﺯﺍ ﺮﮔﺍﯽﻣ ﻥﺎﻨﭽﻤﻫ ،ﺪﯿﻨﮐﮒﺭﺰﺑ ﺭﺍ

ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ Em ﺎﺑ ﺍﺭ ﻢﻠﻗ ﻩﺯﺍﺪﻧﺍ

ﺯﺍ ﯼﺭﺎﯿﺴﺑ ،(ﺮﮔﺭﻭﺮﻣ ﯼﻮﻨﻣ ﺭﺩ) ﺪﻨﻫﺩ ﺮﯿﯿﻐﺗ ﺍﺭ ﻦﺘﻣ ﻩﺯﺍﺪﻧﺍ ﺪﻨﻧﺍﻮﺘﺑ ﻥﺍﺮﺑﺭﺎﮐ ﻪﮑﻨﯾﺍ ﯼﺍﺮ

1em ﺖﺳﺍ ﺎﻫﺮﮔﺭﻭﺮﻣ ﺭﺩ ﺽﺮﻓ ﺶﯿﭘ ﻦﺘﻣ ﻩﺯﺍﺪﻧﺍ .ﺖﺳﺍ ﯽﻠﻌﻓ ﺖﻧﻮﻓ ﻩﺯﺍﺪﻧﺍ ﺎﺑ ﺮﺑﺍﺮﺑ

<i>pixels/16=<i>em :ﺩﺮﮐ ﻪﺒﺳﺎﺤﻣ ﻝﻮﻣﺮﻓ ﻦﯾﺍ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ em ﻪﺑ ﻞﺴﮑﯿﭘ ﺯﺍ

ﻝﺎﺜﻣ

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
 }

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.</p>

</body>
</html>

ﺖﺳﺍ ﯽﻠﺒﻗ ﻝﺎﺜﻣ ﺪﻨﻧﺎﻤﻫ em ﺭﺩ ﻦﺘﻣ ﻩﺯﺍﺪﻧﺍ ،ﻻﺎﺑ ﻝﺎﺜﻣ ﺭﺩ

ﺪﻧﺭﺍﺩ ﻞﮑﺸﻣ ﺯﻮﻨﻫ ﯽﻤﯾﺪﻗ ﯼﺎﻫ ﻪﺨﺴﻧ ﻪﻧﺎﻔﺳﺎﺘﻣ

ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ Em ﻭ ﺪﺻﺭﺩ ﺐﯿﮐﺮﺗ ﺯﺍ

ﺖﺳﺍ ﻥﺁ ﺭﺩ ﺽﺮﻓ ﺶﯿﭘ ﺖﻧﻮﻓ ﻩﺯﺍﺪﻧﺍ ﻢﯿﻈﻨﺗ ،ﺪﻨﮐ ﯽﻣ ﺭﺎﮐ ﺎﻫﺮﮔﺭﻭﺮﻣ ﻪﻤﻫ ﺭﺩ ﻪﮐ ﯽﻠﺣ ﻩﺍﺭ

ﻝﺎﺜﻣ

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!</p>

</body>
</html>

ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﻥﺎﺴﮑﯾ ﻦﺘﻣ ﻩﺯﺍﺪﻧﺍ !ﺪﻨﮐ ﯽﻣ ﺭﺎﮐ ﯽﻟﺎﻋ ﻥﻮﻨﮐﺍ ﺎﻣ ﺪﮐ

ﻮﮕﺨﺳﺎﭘ ﺖﻧﻮﻓ ﻩﺯﺍﺪﻧﺍ

.ﺖﺳﺍ "ﺪﯾﺩ ﻩﺎﮔﺭﺩ ﺽﺮﻋ" ﯼﺎﻨﻌﻣ ﻪﺑ ﻪﮐ ﺩﺮﮐ ﻢﯿﻈﻨﺗ vw

:ﺪﻨﮐ ﯽﻣ ﯼﻭﺮﯿﭘ ﺮﮔﺭﻭﺮﻣ ﻩﺮﺠﻨﭘ ﻩﺯﺍﺪﻧﺍ ﺯﺍ ﻦﺘﻣ ﻩﺯﺍﺪﻧﺍ ﺐﯿﺗﺮﺗ ﻦﯾﺍ ﻪﺑ

Hello World

Resize the browser window to see how the font size scales.

ﻝﺎﺜﻣ

<h1 style="font-size:10vw">Hello World</h1>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>

</body>
</html>

Viewport 1 .ﺖﺳﺍ ﺮﮔﺭﻭﺮﻣ ﻩﺮﺠﻨﭘ ﻩﺯﺍﺪﻧﺍvw=1% 1 ،ﺪﺷﺎﺑ ﺮﺘﻣ ﯽﺘﻧﺎﺳ 50 ﺪﯾﺩ ﺖﻌﺳﻭ ﺮﮔﺍ .