ﻮﮕﺨﺳﺎﭘ ﺖﯾﺎﺳ ﺏﻭ ﯽﺣﺍﺮﻃ ﯼﺍ ﻪﻧﺎﺳﺭ ﯼﺎﻫ ﺶﺳﺮﭘ

فهرست مطالب

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

؟ﺖﺴﯿﭼ ﯼﺍ ﻪﻧﺎﺳﺭ ﺶﺳﺮﭘ

Media Query ﮏﯿﻨﮑﺗ ﮏﯾ CSS ﺭﺩ ﻪﮐ ﺖﺳﺍ CSS3 ﺖﺳﺍ ﻩﺪﺷ ﯽﻓﺮﻌﻣ.

ﻪﮐ ﯽﺗﺭﻮﺻ ﺭﺩ ﻂﻘﻓ ﺍﺭ CSS ﯼﺎﻫﯽﮔﮋﯾﻭ ﺯﺍ ﯽﮐﻮﻠﺑ ﺎﺗ ﺪﻨﮐﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ

ﻝﺎﺜﻣ

:ﺩﻮﺑ ﺪﻫﺍﻮﺧ ﻦﺷﻭﺭ ﯽﺑﺁ ﻪﻨﯿﻣﺯ ﺲﭘ ﮓﻧﺭ ،ﺪﺷﺎﺑ ﺮﺘﮑﭼﻮﮐ ﺎﯾ ﻞﺴﮑﯿﭘ 600 ﺮﮔﺭﻭﺮﻣ ﻩﺮﺠﻨﭘ ﺮﮔﺍ

@media only screen and (max-width: 600px) {
	body {
		background-color: lightblue;
	}
}

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
  background-color: lightgreen;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
</style>
</head>
<body>

<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "lightblue", otherwise it is "lightgreen".</p>

</body>
</html>

ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺖﺴﮑﺷ ﻪﻄﻘﻧ

.ﺪﯿﺳﺭ ﯽﻤﻧ ﺮﻈﻧ ﻪﺑ ﺏﻮﺧ ﮏﭼﻮﮐ ﻪﺤﻔﺻ ﮏﯾ ﺭﺩ ﺎﻣﺍ ،ﺩﻮﺑ ﺍﺮﮔ ﺶﻨﮐﺍﻭ ﻭ ﻢﯿﺘﺧﺎﺳ ﻥﻮﺘﺳ ﻭ ﻒﯾﺩﺭ ﺎ

.ﺪﻨﻨﮐ ﯽﻣ ﺭﺎﺘﻓﺭ ﺕﻭﺎﻔﺘﻣ ﺖﺴﮑﺷ ﻪﻄﻘﻧ ﻑﺮﻃ ﺮﻫ ﺭﺩ ﯽﺣﺍﺮﻃ ﺯﺍ ﯽﺻﺎﺧ ﯼﺎﻫ ﺖﻤﺴﻗ ﻥﺁ ﺭﺩ ﻪﮐ ﻢﯿﻨﮐ


Desktop

Phone

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻞﺴﮑﯿﭘ 768 ﺭﺩ ﺖﺴﮑﺷ ﻪﻄﻘﻧ ﮏﯾ ﻥﺩﺮﮐ ﻪﻓﺎﺿﺍ ﯼﺍﺮﺑ ﻪﻧﺎﺳﺭ ﺖﺳﺍﻮﺧﺭﺩ ﮏﯾ ﺯﺍ

ﻝﺎﺜﻣ

:ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺽﺮﻋ ﺪﺻﺭﺩ 100 ﺪﯾﺎﺑ ﻥﻮﺘﺳ ﺮﻫ ،ﺩﻮﺷ ﯽﻣ ﻞﺴﮑﯿﭘ 768 ﺯﺍ ﺮﺘﮑﭼﻮﮐ (ﺮﮔﺭﻭﺮﻣ ﻩﺮﺠﻨ

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 
100%;}
@media only screen and (max-width: 768px) {
  /* For mobile phones: */
    
[class*="col-"] {
    width: 100%;
  }
}

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">
  <div class="col-3 menu">
    <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
    </ul>
  </div>

  <div class="col-6">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
  </div>

  <div class="col-3 right">
    <div class="aside">
      <h2>What?</h2>
      <p>Chania is a city on the island of Crete.</p>
      <h2>Where?</h2>
      <p>Crete is a Greek island in the Mediterranean Sea.</p>
      <h2>How?</h2>
      <p>You can reach Chania airport from all over Europe.</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

ﺪﯿﻨﮐ ﯽﺣﺍﺮﻃ ﻞﯾﺎﺑﻮﻣ ﯼﺍﺮﺑ ﺍﺪﺘﺑﺍ ﻪﺸﯿﻤﻫ

Mobile First ﺖﺳﺍ ﯼﺰﯿﭼ ﺮﻫ ﺎﯾ ﭖﺎﺘﮑﺳﺩ ﯼﺍﺮﺑ ﯽﺣﺍﺮﻃ ﺯﺍ ﻞﺒﻗ ﻞﯾﺎﺑﻮﻣ ﯼﺍﺮﺑ ﯽﺣﺍﺮﻃ ﯼﺎﻨﻌﻣ ﻪ

.ﻢﯿﻨﮐ ﺩﺎﺠﯾﺍ ﺩﻮﺧ CSS ﺭﺩ ﯽﺗﺍﺮﯿﯿﻐﺗ ﺪﯾﺎﺑ ﺎﻣ ﻪﮐ ﺖﺳﺍ ﯽﻨﻌﻣ ﻥﺍﺪﺑ ﻦﯾﺍ

ﺩﻮﺷ ﯽﻣ ﺮﺘﮑﭼﻮﮐ ﺽﺮﻋ ﻪﮐ ﯽﻧﺎﻣﺯ ﮏﺒﺳ ﺮﯿﯿﻐﺗ ﯼﺎﺟ ﻪﺑ

ﻝﺎﺜﻣ

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 
768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">
  <div class="col-3 menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="col-6">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
  </div>

  <div class="col-3 right">
    <div class="aside">
      <h2>What?</h2>
      <p>Chania is a city on the island of Crete.</p>
      <h2>Where?</h2>
      <p>Crete is a Greek island in the Mediterranean Sea.</p>
      <h2>How?</h2>
      <p>You can reach Chania airport from all over Europe.</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

ﺮﮕﯾﺩ ﺖﺴﮑﺷ ﻪﻄﻘﻧ

.ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺪﯾﺭﺍﺩ ﺖﺳﻭﺩ ﻪﮐ ﺍﺭ ﺖﺴﮑﺷ ﻪﻄﻘﻧ ﺩﺍﺪﻌﺗ ﺮﻫ ﺪﯿﻧﺍﻮﺗ ﯽﻣ

.ﻢﯿﻨﮐ ﯽﻣ ﺝﺭﺩ ﻝﺎﺼﻔﻧﺍ ﻪﻄﻘﻧ ﻩﺍﺮﻤﻫ ﯼﺎﻫ ﻦﻔﻠﺗ ﻭ ﺎﻫ ﺖﻠﺒﺗ ﻦﯿﺑ ﻦﯿﻨﭽﻤﻫ


Desktop

Tablet

Phone

.ﻢﯿﻫﺩ ﯽﻣ ﻡﺎﺠﻧﺍ ﻞﺴﮑﯿﭘ 600 ﺯﺍ ﺮﺘﮔﺭﺰﺑ ﯼﺎﻫ ﻩﺎﮕﺘﺳﺩ ﯼﺍﺮﺑ ﺪﯾﺪﺟ ﯼﺎﻫ ﺱﻼﮐ ﺯﺍ ﯼﺍ ﻪﻋﻮﻤﺠﻣ ﻭ

ﻝﺎﺜﻣ

ﺎﻬﻨﺗ ،ﺪﻨﺘﺴﻫ ﻥﺎﺴﮑﯾ ﺎًﺒﯾﺮﻘﺗ ﺎﻫ ﺱﻼﮐ ﺯﺍ ﻪﻋﻮﻤﺠﻣ ﻭﺩ ﻪﮐ ﺪﯿﺷﺎﺑ ﻪﺘﺷﺍﺩ ﻪﺟﻮﺗ

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
    
/* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 
768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

ﺪﻫﺩ ﯽﻣ ﺎﻣ ﻪﺑ ﺍﺭ ﻥﺁ ﺎﻣﺍ ،ﻢﯿﺷﺎﺑ ﻪﺘﺷﺍﺩ ﻥﺎﺴﮑﯾ ﯼﺎﻫ ﺱﻼﮐ ﺯﺍ ﻪﻋﻮﻤﺠﻣ ﻭﺩ ﺎﻣ ﻪﮐ ﺪﺳﺮﺑ ﺮﻈﻧ

HTML ﻝﺎﺜﻣ

ﭖﺎﺘﮑﺳﺩ ﯼﺍﺮﺑ:

.ﺩﻮﺑ ﺪﻫﺍﻮﺧ ﻥﻮﺘﺳ 6 ﯽﻧﺎﯿﻣ ﺶﺨﺑ .ﺩﻮﺑ ﺪﻨﻫﺍﻮﺧ ﻥﻮﺘﺳ 3 ﯼﺍﺭﺍﺩ ﻭﺩ ﺮﻫ ﻡﻮﺳ ﻭ ﻝﻭﺍ ﺶﺨﺑ

ﯽﺣﻮﻟ ﻪﻧﺎﯾﺍﺭ ﯼﺍﺮﺑ:

:ﺩﻮﺷ ﯽﻣ ﻞﻣﺎﺷ ﺍﺭ ﻥﻮﺘﺳ 12 ﻭ ﺩﻮﺷ ﯽﻣ ﻩﺩﺍﺩ ﺶﯾﺎﻤﻧ ﻝﻭﺍ ﺶﺨﺑ ﻭﺩ ﺮﯾﺯ ﻡﻮﺳ ﺶﺨﺑ ﻭ 9 ﻡﻭﺩ ﺶﺨﺑ

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">
  <div class="col-3 col-s-3 menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="col-6 col-s-9">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
  </div>

  <div class="col-3 col-s-12">
    <div class="aside">
      <h2>What?</h2>
      <p>Chania is a city on the island of Crete.</p>
      <h2>Where?</h2>
      <p>Crete is a Greek island in the Mediterranean Sea.</p>
      <h2>How?</h2>
      <p>You can reach Chania airport from all over Europe.</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

ﯽﻟﻮﻤﻌﻣ ﻩﺎﮕﺘﺳﺩ ﺖﺴﮑﺷ ﻁﺎﻘﻧ

ﺪﯿﻫﺩ ﺭﺍﺮﻗ ﻑﺪﻫ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ﺎﻫﺰﯿﭼ ﻦﺘﺷﺍﺩ ﻪﮕﻧ ﻩﺩﺎﺳ ﯼﺍﺮﺑ .ﺖﺳﺍ ﺭﺍﻮﺷﺩ ﻩﺎﮕﺘﺳﺩ ﺮﻫ ﯼﺍﺮﺑ ﻖﯿ

ﻝﺎﺜﻣ

 /* 
  Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) 
  {...} 
/* Small devices (portrait tablets and large phones, 600px and up) 
  */
@media only screen and (min-width: 600px) {...} 
/* Medium devices (landscape tablets, 768px and up) */
  @media only screen and (min-width: 768px) {...} 
/* Large devices (laptops/desktops, 992px and up) 
  */
  @media only screen and (min-width: 992px) {...} 
/* Extra large devices (large 
  laptops and desktops, 
  1200px and up) */
@media only screen and (min-width: 1200px) {...}

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.example {
  padding: 20px;
  color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .example {background: pink;}
}
</style>
</head>
<body>

<h2>Typical Media Query Breakpoints</h2>
<p class="example">Resize the browser window to see how the background color of this paragraph changes on different screen sizes.</p>

</body>
</html>

ﻩﺮﻈﻨﻣ/ﻩﺮﺗﺮﭘ :ﺖﻬﺟ

ﺩﺮﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻥﺁ ﻪﺑ ﻪﺘﺴﺑ ﻪﺤﻔﺻ ﯼﺪﻨﺑ ﺡﺮﻃ ﺮﯿﯿﻐﺗ ﯼﺍﺮﺑ ﻥﺍﻮﺗ ﯽﻣ ﺰﯿﻧ ﯼﺍ ﻪﻧﺎﺳﺭ ﯼﺎﻫﻮﺟ ﻭ ﺱ

ﺪﻧﺭﺍﺩ ﻂﻘﻓ ﻪﮐ ﺪﯿﺷﺎﺑ ﻪﺘﺷﺍﺩ CSS ﯼﺎﻫﯽﮔﮋﯾﻭ ﺯﺍ ﯼﺍﻪﻋﻮﻤﺠﻣ ﺪﯿﻧﺍﻮﺗﯽﻣ ﺎﻤﺷ

ﻝﺎﺜﻣ

:ﺖﺷﺍﺩ ﺪﻫﺍﻮﺧ ﻦﺷﻭﺭ ﯽﺑﺁ ﻪﻨﯿﻣﺯﺲﭘ ﺏﻭ ﻪﺤﻔﺻ ،ﺪﺷﺎﺑ ﯽﻘﻓﺍ ﺖﻟﺎﺣ ﺭﺩ ﯼﺮﯿﮔﺖﻬﺟ ﺮﮔﺍ

@media only screen and (orientation: landscape) {
	body {
		background-color: lightblue;
	}
}

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
  background-color: lightgreen;
}

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}
</style>
</head>
<body>

<p>Resize the browser window. When the width of this document is larger than the height, the background color is "lightblue", otherwise it is "lightgreen".</p>

</body>
</html>

ﻪﻧﺎﺳﺭ ﯼﺎﻫ ﯼﺮﺋﻮﮐ ﺎﺑ ﺮﺻﺎﻨﻋ ﻥﺩﺮﮐ ﻥﺎﻬﻨﭘ

:ﺖﺳﺍ ﺶﯾﺎﻤﻧ ﻪﺤﻔﺻ ﻒﻠﺘﺨﻣ ﯼﺎﻫ ﻩﺯﺍﺪﻧﺍ ﺭﺩ ﺮﺻﺎﻨﻋ ﻥﺩﺮﮐ ﻥﺎﻬﻨﭘ ،ﯼﺍ ﻪﻧﺎﺳﺭ ﯼﺎﻫ ﺶﺳﺮﭘ ﺞﯾﺍﺭ ﯼ

I will be hidden on small screens.

ﻝﺎﺜﻣ

 /* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
	div.example {
		display: none;
	}
}

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
  background-color: yellow;
  padding: 20px;
}

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}
</style>
</head>
<body>

<h2>Hide elements on different screen sizes</h2>

<div class="example">Example DIV.</div>

<p>When the browser's width is 600px wide or less, hide the div element. Resize the browser window to see the effect.</p>

</body>
</html>

ﯼﺍ ﻪﻧﺎﺳﺭ ﯼﺎﻫ ﺖﺳﺍﻮﺧﺭﺩ ﺎﺑ ﻢﻠﻗ ﻩﺯﺍﺪﻧﺍ ﺮﯿﯿﻐﺗ

ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺮﺼﻨﻋ ﮏﯾ ﻢﻠﻗ ﻩﺯﺍﺪﻧﺍ ﺮﯿﯿﻐﺗ ﯼﺍﺮﺑ ﯼﺍ ﻪﻧﺎﺳﺭ ﯼﺎﻫﻮﺟ ﻭ ﺱﺮﭘ ﺯﺍ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ﻦ

Variable Font Size.

ﻝﺎﺜﻣ

 /* If the screen size is 601px or   more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
	{
		font-size: 80px;
	}
}
/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
	div.example {
		font-size: 30px;
	}
}

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
  background-color: lightgrey;
  padding: 20px;
}

@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}

@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}
</style>
</head>
<body>

<h2>Change the font size of an element on different screen sizes</h2>

<div class="example">Example DIV.</div>

<p>When the browser's width is 600px wide or less, set the font-size of DIV to 30px. When it is 601px or wider, set the font-size to 80px. Resize the browser window to see the effect.</p>

</body>
</html>

CSS @media ﻊﺟﺮﻣ

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

تمامی حقوق محفوظ است. © BasicIT.org • 2023-2024