CSS ﻪﻧﺎﺳﺭ ﯼﺎﻫﻮﺟ ﻭ ﺱﺮﭘ

فهرست مطالب

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

CSS2 ﺩﺮﮐ ﯽﻓﺮﻌﻣ ﺍﺭ ﻪﻧﺎﺳﺭ ﻉﺍﻮﻧﺍ

.ﺩﺮﮐ ﻢﻫﺍﺮﻓ ﻒﻠﺘﺨﻣ ﯼﺎﻫ ﻪﻧﺎﺳﺭ ﻉﺍﻮﻧﺍ ﯼﺍﺮﺑ ﺍﺭ ﺕﻭﺎﻔﺘﻣ ﮏﺒﺳ ﻦﯿﻧﺍﻮﻗ ﻒﯾﺮﻌﺗ ﻥﺎﮑﻣﺍ ،ﺪﺷ ﯽﻓﺮ

ﯼﺍﺮﺑ ﯽﮑﯾ ،ﺪﯿﺷﺎﺑ ﻪﺘﺷﺍﺩ ﻪﻧﺎﯾﺍﺭ ﺶﯾﺎﻤﻧﻪﺤﻔﺻ ﯼﺍﺮﺑ ﮏﺒﺳ ﻦﯿﻧﺍﻮﻗ ﺯﺍ ﻪﻋﻮﻤﺠﻣ ﮏﯾ ﺪﯿﻧﺍﻮ

ﺪﻧﺩﺮﮑﻧ ﺖﻓﺎﯾﺭﺩ ﯼﺩﺎﯾﺯ ﯽﻧﺎﺒﯿﺘﺸﭘ ﺎﻫ ﻩﺎﮕﺘﺳﺩ ﻂﺳﻮﺗ ﺰﮔﺮﻫ ﺎﻫ ﻪﻧﺎﺳﺭ ﻉﻮﻧ ﻦﯾﺍ ﻪﻧﺎﻔﺳﺄﺘﻣ

CSS3 ﺩﺮﮐ ﯽﻓﺮﻌﻣ ﺍﺭ ﯼﺍ ﻪﻧﺎﺳﺭ ﯼﺎﻫﻮﺟ ﻭ ﺱﺮﭘ

،ﻩﺎﮕﺘﺳﺩ ﻉﻮﻧ ﯼﻮﺠﺘﺴﺟ ﯼﺎﺟﻪﺑ :ﺪﻧﺩﺍﺩ ﺵﺮﺘﺴﮔ ﺍﺭ CSS2 ﯼﺎﻫﻪﻧﺎﺳﺭ ﻉﺍﻮﻧﺍ ﻩﺪﯾﺍ CS

:ﺪﻨﻧﺎﻣ ،ﺩﺮﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺩﺭﺍﻮﻣ ﺯﺍ ﯼﺭﺎﯿﺴﺑ ﯽﺳﺭﺮﺑ ﯼﺍﺮﺑ ﻥﺍﻮﺗ ﯽﻣ ﯼﺍ ﻪﻧﺎﺳﺭ ﯼﺎﻫﻮﺟ ﻭ ﺱﺮﭘ ﺯﺍ

ﺪﯾﺩ ﻪﭽﯾﺭﺩ ﻉﺎﻔﺗﺭﺍ ﻭ ﺽﺮﻋ
ﻩﺎﮕﺘﺳﺩ ﻉﺎﻔﺗﺭﺍ ﻭ ﺽﺮﻋ
(؟ﯼﺩﻮﻤﻋ ﺎﯾ ﺖﺳﺍ ﯽﻘﻓﺍ ﺖﻟﺎﺣ ﺭﺩ ﻦﻔﻠﺗ/ﺖﻠﺒﺗ ﺎﯾﺁ) ﺖﻬﺟ
ﺡﻮﺿﻭ

ﺖﺳﺍ ﺐﺳﺎﻨﻣ ﮏﺒﺳ ﮏﯾ ﻪﺋﺍﺭﺍ ﯼﺍﺮﺑ ﺏﻮﺒﺤﻣ ﮏﯿﻨﮑﺗ ﮏﯾ ﯼﺍﻪﻧﺎﺳﺭ ﯼﺎﻫﺶﺳﺮﭘ ﺯﺍ ﻩﺩﺎﻔﺘﺳ

ﺮﮔﺭﻭﺮﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ

.ﺪﻨﮐ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ @media ﻥﻮﻧﺎﻗ ﺯﺍ ﻞﻣﺎﮐ ﺭﻮﻃ ﻪﺑ

Property
@media	21.0	9.0	3.5	4.0	9.0

ﻪﻧﺎﺳﺭ ﻮﺟ ﻭ ﺱﺮﭘ ﻮﺤﻧ

ﺪﺷﺎﺑ ﺩﺭﻮﻣ ﺪﻨﭼ ﺎﯾ ﮏﯾ ﻞﻣﺎﺷ ﺪﻧﺍﻮﺗ ﯽﻣ ﻭ ﺖﺳﺍ ﻩﺪﺷ ﻞﯿﮑﺸﺗ ﻪﻧﺎﺳﺭ ﻉﻮﻧ ﮏﯾ ﺯﺍ ﻪﻧﺎﺳﺭ ﺖﺳﺍﻮﺧﺭ

@media not|only mediatype and  (expressions) {
  CSS-Code;
}

ﺖﺳﺍ ﻦﯾﺍ ﻮﺟ ﻭ ﺱﺮﭘ ﻪﺠﯿﺘﻧ

ﻭ ﺖﺳﺍ ﯼﺭﺎﯿﺘﺧﺍ ﻪﻧﺎﺳﺭ ﻉﻮﻧ ،ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻂﻘﻓ ﺎﯾ ﻪﻧ ﯼﺎﻫﺮﮕﻠﻤﻋ ﺯﺍ ﻪﮑﻨﯾﺍ ﺮﮕﻣ

:ﺪﯿﺷﺎﺑ ﻪﺘﺷﺍﺩ ﻒﻠﺘﺨﻣ ﯼﺎﻫ ﻪﻧﺎﺳﺭ ﯼﺍﺮﺑ ﯽﻔﻠﺘﺨﻣ ﯼﺎﻫ ﻪﻣﺎﻧ ﻩﻮﯿﺷ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ﻦﯿﻨﭽﻤﻫ

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 ﯼﺎﻫ ﻪﻧﺎﺳﺭ ﻉﺍﻮﻧﺍ

all: ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻪﻧﺎﺳﺭ ﻉﻮﻧ ﯼﺎﻫ ﻩﺎﮕﺘﺳﺩ ﻪﻤﻫ ﯼﺍﺮﺑ
print: ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺮﮕﭘﺎﭼ ﯼﺍﺮﺑ
screen: .ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻩﺮﯿﻏ ﻭ ﺪﻨﻤﺷﻮﻫ ﯼﺎﻫ ﻦﻔﻠﺗ ،ﺖﻠﺒﺗ ،ﺮﺗﻮﯿﭙﻣﺎﮐ ﺶﯾﺎﻤﻧ ﻪﺤﻔﺻ ﯼﺍﺮﺑ
speech: ﺪﻨﻨﮐﯽﻣ "ﻩﺪﻧﺍﻮﺧ" ﺪﻨﻠﺑ ﯼﺍﺪﺻ ﺎﺑ ﺍﺭ ﻪﺤﻔﺻ ﻪﮐ ﺩﻮﺷﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﯽﯾﺎﻫﻥﺍﻮﺧu

ﯼﺍ ﻪﻧﺎﺳﺭ ﯼﺎﻫ ﺶﺳﺮﭘ ﻩﺩﺎﺳ ﯼﺎﻫ ﻪﻧﻮﻤﻧ

.ﺪﯿﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺩﻮﺧ ﻞﯾﺎﺘﺳﺍ ﺖﯿﺷ ﻞﺧﺍﺩ ﺭﺩ ﺖﺳﺭﺩ ﻦﯾﺰﮕﯾﺎﺟ CSS ﺶﺨﺑ ﮏﯾ ﻪﮐ ﺖﺳﺍ ﻦﯾﺍ ﯼﺍ ﻪﻧﺎﺳ

ﺪﻫﺩﯽﻣ ﺮﯿﯿﻐﺗ ﻦﺷﻭﺭ ﺰﺒﺳ ﻪﺑ ﺍﺭ ﻪﻨﯿﻣﺯﺲﭘ ﮓﻧﺭ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

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

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: pink;
}

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
</style>
</head>
<body>

<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>

</body>
</html>

ﺩﻮﺷ ﯽﻣ ﺭﻭﺎﻨﺷ ﻪﺤﻔﺻ ﭗﭼ ﺖﻤﺳ ﺭﺩ ﻪﮐ ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﯽﯾﻮﻨﻣ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

@media screen and (min-width: 480px) {
  #leftsidebar 
{width: 200px; float: left;}
  #main 
{margin-left: 216px;}
}

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}

#main {margin-left: 4px;}

#leftsidebar {
  float: none;
  width: auto;
}

#menulist {
  margin: 0;
  padding: 0;
}

.menuitem {
  background: #CDF0F6;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  list-style-type: none;
  margin: 4px;
  padding: 2px;
}

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}
</style>
</head>
<body>

<div class="wrapper">
  <div id="leftsidebar">
    <ul id="menulist">
      <li class="menuitem">Menu-item 1</li>
      <li class="menuitem">Menu-item 2</li>
      <li class="menuitem">Menu-item 3</li>
      <li class="menuitem">Menu-item 4</li>
      <li class="menuitem">Menu-item 5</li>
    </ul>
  </div>
  
  <div id="main">
    <h1>Resize the browser window to see the effect!</h1>
    <p>This example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider. If the viewport is less than 480 pixels, the menu will be on top of the content.</p>
  </div>
</div>

</body>
</html>

ﻪﻧﺎﺳﺭ ﻮﺟ ﻭ ﺱﺮﭘ ﺮﺘﺸﯿﺑ ﯼﺎﻫ ﻪﻧﻮﻤﻧ

.CSS MQ Examples :ﺪﯾﻭﺮﺑ ﯼﺪﻌﺑ ﻪﺤﻔﺻ ﻪﺑ ،ﻪﻧﺎﺳﺭ ﯼﺎﻫﺖﺳﺍﻮﺧﺭﺩ ﺩﺭﻮﻣ ﺭﺩ ﺮﺘﺸﯿﺑ ﯼﺎﻫu

CSS @media ﻊﺟﺮﻣ

ﺪﯿﻨﮐ ﻩﺎﮕﻧ ﻥﺁ ﻪﺑ ﺎًﻔﻄﻟ ،ﺕﺍﺭﺎﺒﻋ/ﺎﻫ ﯽﮔﮋﯾﻭ ﻭ ﺎﻫ ﻪﻧﺎﺳﺭ ﻉﺍﻮﻧﺍ ﻪﻤﻫ ﺯﺍ ﯽﻠﮐ ﯼﺎﻤﻧ ﮏﯾ ﯼﺍﺮﺑ