ﺎﻫﻝﺎﺜﻣ - CSS3 ﯼﺍﻪﻧﺎﺳﺭ ﯼﺎﻫﺶﺳﺮﭘ

فهرست مطالب

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

.ﻢﯿﻨﮐ ﯽﺳﺭﺮﺑ ﺍﺭ ﯼﺍﻪﻧﺎﺳﺭ ﯼﺎﻫﺶﺳﺮﭘ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺯﺍ ﺮﮕﯾﺩ ﻪﻧﻮﻤﻧ ﺪﻨﭼ ﺪﯿﻫﺩ ﻩﺯﺎ

:ﻢﯿﻫﺩ ﺮﯿﯿﻐﺗ ﺍﺭ ﻒﻠﺘﺨﻣ ﯼﺎﻫﻩﺎﮕﺘﺳﺩ ﻪﻨﯿﻣﺯﺲﭘ ﮓﻧﺭ ﻢﯿﻧﺍﻮﺗﯽﻣ ،ﻩﺩﺎﺳ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

 /* Set the background color of body to tan */
body {
  
  background-color: tan;
}
/* On 
  screens that are 992px or less, set the background color to blue */
@media 
  screen and (max-width: 992px) {
  body {
    
  background-color: blue;
  }
}
/* On screens that are 600px or less, 
  set the 
  background color to olive */
@media screen and (max-width: 600px) {
  
  body {
    background-color: olive;
  }
}

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

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

/* On screens that are 992px wide or less, the background color is blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
    color: white;
  }
}

/* On screens that are 600px wide or less, the background color is olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
    color: white;
  }
}
</style>
</head>
<body>

<h1>Resize the browser window to see the effect!</h1>
<p>By default, the background color of the document is "tan". If the screen size is 992px or less, the color will change to "blue". If it is 600px or less, it will change to "olive".</p>

</body>
</html>

.ﺪﯿﻨﮐ ﺐﺴﮐ ﯼﺮﺘﺸﯿﺑ ﺕﺎﻋﻼﻃﺍ ﯽﻟﻮﻤﻌﻣ ﺖﺴﮑﺷ ﻁﺎﻘﻧ ﻩﺭﺎﺑﺭﺩ ﺎﻣ ﺍﺮﮔ ﺶﻨﮐﺍﻭ ﺏﻭ ﯽﺣﺍﺮﻃ ﺵﺯﻮﻣﺁ ﺭﺩ

ﺎﻫﻮﻨﻣ ﯼﺍﺮﺑ ﯼﺍ ﻪﻧﺎﺳﺭ ﯼﺎﻫ ﺶﺳﺮﭘ

.ﺩﺭﺍﺩ ﯽﺗﻭﺎﻔﺘﻣ ﯽﺣﺍﺮﻃ ﺶﯾﺎﻤﻧﻪﺤﻔﺻ ﻒﻠﺘﺨﻣ ﯼﺎﻫﻩﺯﺍﺪﻧﺍ ﺭﺩ ﻪﮐ ﻢﯿﻨﮐﯽﻣ ﻩﺩﺎﻔ

:ﮒﺭﺰﺑ ﺶﯾﺎﻤﻧ ﻪﺤﻔﺻ

Home Link 1 Link 2 Link 3

:ﮏﭼﻮﮐ ﯼﺎﻫ ﺶﯾﺎﻤﻧ ﻪﺤﻔﺻ

Home Link 1 Link 2 Link 3

ﻝﺎﺜﻣ

   /* The navbar container */
.topnav {
  overflow: hidden;
  
   background-color: #333;
}
/* Navbar links */
.topnav a {
  float: 
   left;
  display: block;
  color: 
   white;
  text-align: center;
  padding: 14px 16px;
     text-decoration: none;
}

   /* On screens that are 600px wide or less, make the menu links stack on top 
   of each other instead of next to each other */
@media screen and (max-width: 600px) {
     
   .topnav a {
    float: none;
    width: 
   100%;
  }
}

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<h2>Responsive navigation menu</h2>
<p>Resize the browser window to see the effect: When the screen is less than 600px, the navigation menu will be displayed vertically instead of horizontally.</p>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

</body>
</html>

ﺎﻫ ﻥﻮﺘﺳ ﯼﺍﺮﺑ ﯼﺍ ﻪﻧﺎﺳﺭ ﯼﺎﻫ ﺶﺳﺮﭘ

:ﺖﺳﺍ ﺕﻭﺎﻔﺘﻣ ﺽﺮﻋ ﻡﺎﻤﺗ ﯼﺎﻫ ﻥﻮﺘﺳ ﻭ ﻭﺩ ،ﺭﺎﻬﭼ ﻦﯿﺑ ،ﺶﯾﺎﻤﻧ ﻪﺤﻔﺻ ﻒﻠﺘﺨﻣ ﯼﺎﻫ ﻩﺯﺍﺪﻧﺍ ﻪﺑ ﻪ

Large screens:

Medium screens:

Small screens:

ﻝﺎﺜﻣ

 /* Create four equal columns that floats next to each other */
.column {
  
  float: left;
  width: 25%;
}
/* On screens that are 992px 
  wide or less, go from 
  four columns to two columns */
@media screen and (max-width: 992px) {
  
  .column {
    width: 50%;
  }
}
/* On screens that are 
  600px wide or less, make 
  the columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
  .column {
    width: 
  100%;
  }
}

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

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

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>

<h2>Responsive Four Column Layout</h2>
<p><strong>Resize the browser window to see the responsive effect.</strong> On screens that are 992px wide or less, the columns will resize from four columns to two columns. On screens that are 600px wide or less, the columns will stack on top of each other instead of next to eachother.</p>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  
  <div class="column" style="background-color:#ddd;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
</div>

</body>
</html>

ﻪﺘﮑﻧ: ﻥﺭﺪﻣ ﺵﻭﺭ ﮏﯾﺡﺮﻃ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ ﺮﺗﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ،ﻥﻮﺘﺳ

.ﺪﯿﻧﺍﻮﺨﺑ ﺍﺭ ﺎﻣ CSS Flexbox ﻞﺼﻓ ،ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻪﺒﻌﺟ ﯼﺪﻨﺑ ﺡﺮﻃ ﻝﻭﮊﺎﻣ ﺩﺭﻮﻣ ﺭﺩ ﺮﺘﺸﯿﺑ

.ﺪﯿﻧﺍﻮﺨﺑ ﺍﺭ ﺎﻣ ﻮﯿﺴﻧﺎﭙﺴﯾﺭ ﺏﻭ ﯽﺣﺍﺮﻃ ﺵﺯﻮﻣﺁ ،ﻮﯿﺴﻧﺎﭙﺴﯾﺭ ﺏﻭ ﯽﺣﺍﺮﻃ ﺩﺭﻮﻣ ﺭﺩ ﺮﺘﺸﯿﺑ ﺕﺎﻋﻼ

ﻝﺎﺜﻣ

 /* Container for flexboxes */
.row {
  display: flex;
  
  flex-wrap: wrap;
}
/* Create four equal columns */
.column {
  flex: 25%;
  
  padding: 20px;
}
/* On screens that are 992px wide or less, go from 
  four columns to two columns */
@media screen and (max-width: 992px) {
  
  .column {
    flex: 50%;
  }
}
/* On screens that are 600px wide or less, make 
  the columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
  .row {
    
  flex-direction: column;
  }
}

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

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

/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns */
.column {
  flex: 25%;
  padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}
</style>
</head>
<body>

<h2>Responsive Four Column Layout with Flex</h2>
<p><strong>Resize the browser window to see the responsive effect.</strong> On screens that are 992px wide or less, the columns will resize from four columns to two columns. On screens that are 600px wide or less, the columns will stack on top of each other instead of next to eachother.</p>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  
  <div class="column" style="background-color:#ddd;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
</div>

</body>
</html>

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

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

I will be hidden on small screens.

ﻝﺎﺜﻣ

 /* If the screen size is 600px wide or less, hide the element */
@media 
  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 screen size is more than 600px wide, set the font-size of <div> to 80px */
@media screen and (min-width: 
  600px) {
  div.example {
    
  font-size: 80px;
  }
}
/* If screen size is 600px wide, or less, 
  set the font-size of <div> to 30px */
@media 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>

ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺮﯾﻭﺎﺼﺗ ﯼﺮﻟﺎﮔ

:ﻢﯿﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻮﮕﺨﺳﺎﭘ ﺲﮑﻋ ﯼﺮﻟﺎﮔ ﮏﯾ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ flexbox ﺎﺑ ﻩﺍﺮﻤﻫ ﯼﺍ ﻪﻧﺎﺳﺭ ﯼﺎﻫﻮ

ﻝﺎﺜﻣ

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

<!DOCTYPE html>
<html>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
</style>
<body>

<!-- Header -->
<div class="header">
  <h1>Responsive Image Grid</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <img src="/w3images/wedding.jpg" style="width:100%">
    <img src="/w3images/rocks.jpg" style="width:100%">
    <img src="/w3images/falls2.jpg" style="width:100%">
    <img src="/w3images/paris.jpg" style="width:100%">
    <img src="/w3images/nature.jpg" style="width:100%">
    <img src="/w3images/mist.jpg" style="width:100%">
    <img src="/w3images/paris.jpg" style="width:100%">
  </div>
  
  <div class="column">
    <img src="/w3images/underwater.jpg" style="width:100%">
    <img src="/w3images/ocean.jpg" style="width:100%">
    <img src="/w3images/wedding.jpg" style="width:100%">
    <img src="/w3images/mountainskies.jpg" style="width:100%">
    <img src="/w3images/rocks.jpg" style="width:100%">
    <img src="/w3images/underwater.jpg" style="width:100%">
  </div> 
   
  <div class="column">
    <img src="/w3images/wedding.jpg" style="width:100%">
    <img src="/w3images/rocks.jpg" style="width:100%">
    <img src="/w3images/falls2.jpg" style="width:100%">
    <img src="/w3images/paris.jpg" style="width:100%">
    <img src="/w3images/nature.jpg" style="width:100%">
    <img src="/w3images/mist.jpg" style="width:100%">
    <img src="/w3images/paris.jpg" style="width:100%">
  </div>
  
  <div class="column">
    <img src="/w3images/underwater.jpg" style="width:100%">
    <img src="/w3images/ocean.jpg" style="width:100%">
    <img src="/w3images/wedding.jpg" style="width:100%">
    <img src="/w3images/mountainskies.jpg" style="width:100%">
    <img src="/w3images/rocks.jpg" style="width:100%">
    <img src="/w3images/underwater.jpg" style="width:100%">
  </div>
</div>

</body>
</html>

ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺖﯾﺎﺳ ﺏﻭ

.ﻢﯿﻨﮐﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺮﯾﺬﭘﻑﺎﻄﻌﻧﺍ ﯼﺍﻮﺘﺤﻣ ﻭ ﺮﯾﺬﭘﻑﺎﻄﻌﻧﺍ ﯼﺮﺑﻭﺎﻧ ﺭﺍﻮﻧ ﮏﯾ ﯼ

ﻝﺎﺜﻣ

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

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial;
  margin: 0;
}

/* Header/logo Title */
.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* Style the top navigation bar */
.navbar {
  display: flex;
  background-color: #333;
}

/* Style the navigation bar links */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Column container */
.row {  
  display: flex;
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
}
</style>
</head>
<body>

<!-- Note -->
<div style="background:yellow;padding:5px">
  <h4 style="text-align:center">Resize the browser window to see the responsive effect.</h4>
</div>

<!-- Header -->
<div class="header">
  <h1>My Website</h1>
  <p>With a <b>flexible</b> layout.</p>
</div>

<!-- Navigation Bar -->
<div class="navbar">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<!-- The flexible grid (content) -->
<div class="row">
  <div class="side">
    <h2>About Me</h2>
    <h5>Photo of me:</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    <h3>More Text</h3>
    <p>Lorem ipsum dolor sit ame.</p>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div>
  </div>
  <div class="main">
    <h2>TITLE HEADING</h2>
    <h5>Title description, Dec 7, 2017</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    <br>
    <h2>TITLE HEADING</h2>
    <h5>Title description, Sep 2, 2017</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
</div>

<!-- Footer -->
<div class="footer">
  <h2>Footer</h2>
</div>

</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>

ﺽﺮﻋ ﺮﺜﮐﺍﺪﺣ ﺎﺗ ﺽﺮﻋ ﻞﻗﺍﺪﺣ

.ﺽﺮﻋ ﺮﺜﮐﺍﺪﺣ ﻭ ﺽﺮﻋ ﻞﻗﺍﺪﺣ ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ ﺮﯾﺩﺎﻘﻣ .ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ (

ﺪﯿﻫﺩ ﺮﯿﯿﻐﺗ ﺍﺭ ﻥﺁ ،ﺖﺳﺍ ﻞﺴﮑﯿﭘ 900 ﺎﺗ 600 ﻦﯿﺑ ﺮﮔﺭﻭﺮﻣ ﺽﺮﻋ ﻪﮐ ﯽﻧﺎﻣﺯ ،ﻝﺎﺜﻣ ﻥﺍﻮﻨﻋ ﻪﺑ

`ﻝﺎﺜﻣ`

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    
  font-size: 50px;
    padding: 50px;
    
  border: 8px solid black;
    background: yellow;
  }
}

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
</style>
</head>
<body>

<h2>Change the appearance of DIV on different screen sizes</h2>

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

<p>When the browser's width is between 600 and 900px, change the appearance of DIV. 
<strong>Resize the browser window to see the effect</strong>.</p>

</body>
</html>

ﯽﻓﺎﺿﺍ ﺭﺍﺪﻘﻣ ﮏﯾ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ: ﻢﯿﻨﮐ ﯽﻣ ﻪﻓﺎﺿﺍ ﺩﻮﺧ ﯽﻠﺒﻗ ﻪﺑ ﺍﺭ ﯽﻓﺎﺿﺍ

`ﻝﺎﺜﻣ`

 /* When the width is between 600px and 900px OR above 1100px 
  - change the appearance of <div> */
@media screen and (max-width: 900px) and (min-width: 
  600px), (min-width: 
1100px) {
  div.example {
    
  font-size: 50px;
    padding: 50px;
    
  border: 8px solid black;
    background: yellow;
  }
}

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example{
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
</style>
</head>
<body>

<h2>Change the appearance of DIV on different screen sizes</h2>

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

<p>When the browser's width is between 600 and 900px OR above 1100px, change the appearance of DIV. 
<strong>Resize the browser window to see the effect</strong>.</p>

</body>
</html>

`CSS @media ﻊﺟﺮﻣ`

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

ﻪﺘﮑﻧ: ﺶﻨﮐﺍﻭ ﺏﻭ ﯽﺣﺍﺮﻃ ﺩﺭﻮﻣ ﺭﺩ ﺮﺘﺸﯿﺑ ﺕﺎﻋﻼﻃﺍ ﺐﺴﮐ ﯼﺍﺮﺑﺍﺮﮔ (ﻑ


  
    
      ← صفحه قبلی
    
    
      صفحه بعد →