مثال کوئری Media در CSS

اجازه دهید ما به برخی از نمونه های بیشتری از استفاده Media نگاه کنیم.

کوئری Media  یک روش محبوب برای ارائه یک سبک مناسب به دستگاه های مختلف است. برای نشان دادن یک مثال ساده، می توانیم رنگ پس زمینه را برای دستگاه های مختلف تغییر دهیم:

مثال Media
/* 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;
  }
}
مشاهده مثال

نکته: آیا شما تعجب می کنید که ما دقیقا از 992px و 600px استفاده می کنیم؟ آنها همان چیزی هستند که ما "نقطه توقف معمول" برای دستگاه ها می نامیم.

کوئری Media برای منو

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

media برای منو
 /* 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%;
    }
} 
مشاهده مثال

کوئری Media برای ستون

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

media برای ستون
/* 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%;
  }
}
مشاهده مثال

نکته: روش مدرن تر ساخت لایه ستون، استفاده از CSS Flexbox است (به مثال زیر مراجعه کنید). با این حال، در اینترنت اکسپلورر 10 و نسخه های قبلی پشتیبانی نمی شود. اگر نیاز به پشتیبانی IE6-10 دارید، از شناورها استفاده کنید (همانطور که در بالا نشان داده شده است).

برای کسب اطلاعات بیشتر در مورد ماژول چیدمان جعبه انعطاف پذیر، فصل CSS Flexbox ما را بخوانید.

media برای ستون
/* 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;
  }
}
مشاهده مثال

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

یکی دیگر از استفاده معمول از کوئری Media این است که عناصر را روی اندازه های مختلف صفحه نمایش پنهان کنید:

مخفی کردن عنصر
/* If the screen size is 600px wide or less, hide the element */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}
مشاهده مثال

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

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

تغییر اندازه فونت در مدیا
<div> to 80px */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}

<div> to 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}
مشاهده مثال

وب سایت قابل انعطاف

در این مثال، ما از فرم های رسانه ای همراه با flexbox برای ایجاد یک وب سایت پاسخگو استفاده می کنیم که حاوی نوار ناوبری قابل انعطاف و محتوای قابل انعطاف است.

وب سایت انعطاف پذیر
* {
    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;
}
مشاهده مثال

جهت: افقی / عمودی

کوئری Media همچنین می تواند برای تغییر طرح بندی یک صفحه بسته به جهت مرورگر مورد استفاده قرار گیرد.

شما می توانید یک مجموعه ای از خواص CSS داشته باشید که فقط زمانی اعمال می شود که پنجره مرورگر از ارتفاع آن گسترده تر است، جهت گیری به اصطلاح " Landscape ":

Portrait و Landscape
@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}
مشاهده مثال

 Min Width و Max Width

شما همچنین می توانید از مقادیر (max-width: ..) و (min-width: ..) برای تنظیم حداقل عرض و حداکثر عرض استفاده کنید.

برای مثال، هنگامی که عرض مرورگر بین 600 و 900 پیکسل است، ظاهر یک عنصر <div> را تغییر دهید:

Min Width وMax Width
@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
مشاهده مثال

با استفاده از یک مقدار اضافی: در مثال زیر، کوئری Media را در حال حاضر موجود با استفاده از کاما اضافه می کنیم (این عمل مانند یک اپراتور OR):

تغییر ظاهر در مدیا
/* 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;
  }
}
مشاهده مثال

 

نظر شما

یادگیری CSS یادگیری CSS

مقدمه ای بر CSS ترکیب کدهای CSS CSS چگونه کار میکند؟ رنگ ها در CSS پس زمينه در CSS خط حاشيه ( border ) در CSS margin (حاشیه) در CSS صفت padding در CSS عرض و ارتفاع در CSS مدل جعبه ای CSS outline در CSS متن در CSS فونت ها در CSS آیکون ها در CSS لینک ها در CSS لیست ها در CSS جدول در CSS نمايش در قالب بندی CSS حداكثر عرض در CSS صفت position در CSS صفت overflow در CSS صفت float در CSS بلوک اینلاین در CSS تراز بندی در CSS combinator در CSS Pseudo-classes در CSS Pseudo-Elements در CSS تاری و شفافیت در CSS منو ناوبری در CSS کرکره ها در CSS ابزار راهنما (tooltip) در CSS گالری تصاویر در CSS اسپرایت تصویر در CSS سلکتور های صفات در CSS فرم ها در CSS شمارشگر ها در CSS معرفی CSS3 گوشه های گرد در CSS3 حاشیه های تصویری در CSS3 پس زمینه در CSS3 رنگ ها در CSS3 گرادیانت در CSS3 سایه در CSS3 متن در CSS3 فونت ها در CSS3 ترنسفرم های دوبعدی در CSS3 ترنسفرم های سه بعدی CSS3 انتقال در CSS انیمیشن در CSS Tooltip در CSS استایل تصویر در CSS ویژگی object-fit در CSS دکمه ها در CSS صفحه بندی در CSS چندستونی در CSS رابط کاربری CSS متغیرهای CSS اندازه جعبه (Box) در CSS Flexbox در CSS کوئری Media در CSS مثال کوئری Media در CSS طراحی ریسپانسیو وب – مقدمه طراحی ریسپانسیو وب – viewport طراحی ریسپانسیو وب – Grid-View طراحی ریسپانسیو وب – کوئری Media طراحی ریسپانسیو وب – تصاویر طراحی ریسپانسیو وب – ویدیو طراحی ریسپانسیو وب – چارچوب (Frameworks) چیدمان شبکه ای در CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز