CSS ﺶﺳﺮﭘ ﺭﺩ ﺎﻫﺮﯿﻐﺘﻣ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑﻪﻧﺎﺳﺭ ﯼﺎﻫﯼﺍ

فهرست مطالب

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

ﯼﺍ ﻪﻧﺎﺳﺭ ﯼﺎﻫﻮﺟ ﻭ ﺱﺮﭘ ﺭﺩ ﺎﻫﺮﯿﻐﺘﻣ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ

.ﻢﯿﻫﺩ ﺮﯿﯿﻐﺗ ﯼﺍ ﻪﻧﺎﺳﺭ ﻮﺟ ﻭ ﺱﺮﭘ ﮏﯾ ﻞﺧﺍﺩ ﺭﺩ ﺍﺭ ﺮﯿﻐﺘﻣ ﺭﺍﺪﻘﻣ ﻢﯿﻫﺍﻮﺧ ﯽﻣ ﻥﻮﻨﮐﺍ

ﻪﺘﮑﻧ: ﺶﺳﺮﭘﺪﻨﺘﺴﻫ ﮏﺒﺳ ﻒﻠﺘﺨﻣ ﻦﯿﻧﺍﻮﻗ ﻒﯾﺮﻌﺗ ﺩﺭﻮﻣ ﺭﺩ ﻪﻧﺎﺳﺭ ﯼﺎﻫ

ﻢﯿﻨﮐ ﯽﻣ ﻡﻼﻋﺍ ﺍﺭ the ﯼﺍﺮﺑ fontsize-- ﻡﺎﻧ ﻪﺑ ﺪﯾﺪﺟ ﯽﻠﺤﻣ ﺮﯿﻐﺘﻣ ﮏﯾ ﺍﺪﺘﺑﺍ ،ﺎﺠﻨﯾﺍ ﺭﺩ

:ﺖﺳﺍ ﻞﻣﺎﮐ ﻝﺎﺜﻣ ﻦﯾﺍ

ﻝﺎﺜﻣ

 /* Variable declarations */ 
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
  }

  .container {
  --fontsize: 25px;
}
/* Styles */
body {
  
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container 
  {
  color: var(--blue);
  background-color: var(--white);
  
  padding: 15px;
  font-size: var(--fontsize);
}
@media screen and (min-width: 
  450px) {
  
  .container {
    --fontsize: 50px;
  }
}

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Variable declarations */ 
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

.container {
  --fontsize: 25px;
}

/* Styles */ 
body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
  font-size: var(--fontsize);
}

@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
}
</style>
</head>
<body>

<h1>Using Variables in Media Queries</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>When the browser's width is less than 450px, the font-size of this div is 25px. When it is 450px or wider, set the --fontsize variable value to 50px. Resize the browser window to see the effect.</p>
</div>

</body>
</html>

ﻢﯿﻫﺩ ﯽﻣ ﺮﯿﯿﻐﺗ ﺰﯿﻧ ﺍﺭ blue-- ﺮﯿﻐﺘﻣ ﺭﺍﺪﻘﻣ ﻥﺁ ﺭﺩ ﻪﮐ ﺩﺭﺍﺩ ﺩﻮﺟﻭ ﯼﺮﮕﯾﺩ ﻝﺎﺜﻣ ﺎﺠﻨﯾﺍ ﺭﺩ

ﻝﺎﺜﻣ

 /* Variable declarations */ 
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
  }

  .container {
  --fontsize: 25px;
}
/* Styles */
body {
  
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container 
  {
  color: var(--blue);
  background-color: var(--white);
  
  padding: 15px;
  font-size: var(--fontsize);
}
@media screen and (min-width: 
  450px) {
  
  .container {
    --fontsize: 50px;
  }
   
  :root {
    --blue: lightblue;
  }
}

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Variable declarations */ 
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

.container {
  --fontsize: 25px;
}

/* Styles */ 
body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
  font-size: var(--fontsize);
}

@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
  :root {
    --blue: lightblue;
  }
}
</style>
</head>
<body>

<h1>Using Variables in Media Queries</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>When the browser's width is 450px or wider, set the --fontsize variable value to 50px and the --blue variable value to lightblue. Resize the browser window to see the effect.</p>
</div>

</body>
</html>

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

ﺪﻨﮐ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ ﻥﺁ ﺯﺍ ﻞﻣﺎﮐ ﺭﻮﻃ ﻪﺑ ﻪﮐ ﺪﻨﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺮﮔﺭﻭﺮﻣ ﻪﺨﺴﻧ ﻦﯿﻟﻭﺍ ﻝﻭﺪﺟ ﺭﺩ

Function
var() 49.0 15.0 31.0 9.1 36.0

.()CSS var ﻊﺑﺎﺗ

var()

ﺪﻨﮐ ﯽﻣ ﺝﺭﺩ ﺍﺭ CSS ﺮﯿﻐﺘﻣ ﮏﯾ ﺭﺍﺪﻘﻣ