چند مثال از مدیا کوئری ها در CSS

مدیا کوئری ها در CSS یک روش محبوب برای ارائه یک برگه ی استایلِ(style sheet) سفارشی، برای دستگاه های مختلف محسوب می شوند. بعنوان یک مثال ساده، ما می توانیم با استفاده از مدیا کوئری ها، رنگ پس زمینه را برای دستگاه های مختلف تغییر دهیم:

/*استایل پایه برای دستگاه های موبایل*/
body {
  background-color: olive;
  color: white;
}

/* 768px برای دستگاه هایی(متوسط) که مینیمم عرض آنها برابر است با*/
@media screen and (min-width: 768px) {
  body {
    background-color: blue;
    color: white;
  }
}

/* 992px برای دستگاه هایی(بزرگی) که مینیمم عرض آنها برابر است با */
@media screen and (min-width: 992px) {
  body {
    background-color: tan;
    color: black;
  }
}

استفاده از مدیا کوئری ها برای ستون ها

یک روش استفاده از مدیا کوئری ها، ایجاد یک چینشِ انعطاف پذیر (flexible layout) است. ما در مثال زیر، یک چینش ایجاد می کنیم که بسته به سایزهای مختلف صفحه، از چهار ستون، دو ستون، یا یک ستون (تمام عرض) استفاده می کند.  

* {
box-sizing: border-box;
}

/* ظرفی برای جعبه های فلکس(فلکس باکس ها) */
.container {
  display: flex;
  flex-wrap: wrap;
}

/* ایجاد چهار ستون برابر */
.column {
  flex: 25%;
  padding: 20px;
}

/*برای صفحه هایی که عرض آنها 992 پیکسل یا کمتر است، از چهار ستون به دو ستون تغییر کند*/
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

/*برای صفحه هایی که 600 پیکسل یا کمتر، عرض دارند، کاری می کنیم که ستون ها روی یکدیگر بیفتند؛ به جای اینکه در کنار هم قرار گیرند*/
@media screen and (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

استفاده از مدیا کوئری ها برای منوها

در اینجا، از مدیا کوئری ها برای ایجاد یک منوی واکنشگرا استفاده می کنیم که بسته به سایزهای مختلف صفحه، تغییر می کند. 

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333333;
  display: flex;
}

ul li a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover {
  background-color: #111111;
}

/* وقتی که صفحه کمتر از 600 پیکسل می شود، این منو به جای اینکه افقی باشد، به صورت عمودی نشان داده می شود. */
@media screen and (max-width: 600px) {
  ul {flex-direction: column;}
}

مخفی کردن عناصر با استفاده از مدیا کوئری ها

در اینجا از مدیا کوئری ها برای مخفی کردن یک عنصر در صفحه های نمایش کوچک استفاده می کنیم:

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

تغییر سایز فونت با مدیا کوئری ها

ما در اینجا، از مدیا کوئری ها برای تغییر دادن سایز فونت یک عنصر در عرض های(width) مختلف منطقه ی دید(viewport)، استفاده می کنیم:

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

استفاده از مدیا کوئری ها برای تنظیم جهت صفحه(Screen Orientation)

ما همچنین می توانیم از مدیا کوئری ها برای تغییر چینش صفحه، بسته به جهت(orientation) صفحه ی نمایش(screen) استفاده کنیم. در مثال زیر، اگر جهت صفحه ی نمایش افقی(landscape) باشد، رنگ پس زمینه ی body را تغییر می دهیم:

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

مدیا کوئری ها  و تنظیمات برگزیده کاربر

برخی کاربران به حرکت حساسیت دارند و وب سایت هایی که انیمیشن کمتری دارند را ترجیح می دهند. خاصیت مدیای prefers-reduced-motion به ما امکان می دهد تا بررسی کنیم که آیا یک کاربر درخواست حرکت کمتری برای انیمیشن ها یا transition ها داده است یا نه. با استفاده از این خاصیت می توانیم برای کاربرانی که این تنظیم را در رایانه ی خود فعال کرده اند، انیمیشن ها و transition ها را غیرفعال کنیم. 

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

وب سایت واکنشگرا

در زیر، با استفاده از مدیا کوئری ها و فلکس باکس(flexbox) یک وب سایت واکنش گرا ایجاد کرده ایم:

@media screen and (max-width: 700px) {
  .container, .navbar {   
    flex-direction: column;
  }
}

منبع: https://www.w3schools.com/css