آموزش مدیا کوئری ها در واکنش گرایی در CSS

مثال شماره 1

در مثال زیر، از یک مدیا کوئری برای اضافه کردن یک نقطه شکست در 600px استفاده شده است:

@media (min-width: 600px) {
  .header {grid-area: 1 / span 6;}
  .menu {grid-area: 2 / span 1;}
  .content {grid-area: 2 / span 4;}
  .facts {grid-area: 2 / span 1;}
  .footer {grid-area: 3 / span 6;}
}

مثال شماره 2

در مثال زیر، از مدیا کوئری ها برای اضافه کردن نقاط شکست هنگامی که صفحه نمایش کمتر از 600px می شود و هنگامی که صفحه نمایش کمتر از 768px استفاده می کنیم:

@media (min-width: 600px) {
  .header {grid-area: 1 / span 6;}
  .menu {grid-area: 2 / span 1;}
  .content {grid-area: 2 / span 4;}
  .facts {grid-area: 3 / span 6;}
  .footer {grid-area: 4 / span 6;}
}

@media (min-width: 768px) {
  .header {grid-area: 1 / span 6;}
  .menu {grid-area: 2 / span 1;}
  .content {grid-area: 2 / span 4;}
  .facts {grid-area: 2 / span 1;}
  .footer {grid-area: 3 / span 6;}
}

مثال شماره 3

 /* 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) {...} 

مثال شماره 4

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

مثال شماره 5

/* مخفی کردن عنصر اگر عرض منطقه دید 600 پیکسل یا کمتر باشد */
@media screen and (max-width: 600px) {
  #div1 {
    display: none;
  }
}

مثال شماره 6

/* اگر عرض منطقه دید 600 پیکسل یا بیشتر باشد، font-size برابر با 80 پیکسل تنظیم می شود */
@media screen and (min-width: 600px) {
  #div1 {
    font-size: 80px;
  }
}

مثال شماره 7

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}