طراحی وب واکنش گرا - Media Querys

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


Media Query چیست؟

Media Query یک تکنیک CSS است که در CSS3 معرفی شد.[۱]

این تکنیک تنها در صورتی که شرط خاصی ture شود، از قانون @media برای دربر گرفتن بلوکی از ویژگی‌های CSS استفاده می‌کند.

مثال

اگر پنجره مرورگر برابر با ۶۰۰ پیکسل یا کوچکتر باشد، رنگ پس زمینه آبی روشن (lightblue) خواهد شد:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

اضافه‌کردن نقطه شکست (Breakpoint)

پیش تر در این آموزش، صفحه وبی با ستون‌ها و ردیف‌ها ساختیم و آن صفحه واکنش گرا بود، اما در صفحه نمایش‌های کوچک خوب بنظر نمی‌رسید.

Media Queryها می‌توانند در این مورد ما را یاری کنند. می‌توانیم یک نقطه شکست اضافه کنیم که بخش‌های خاصی از طراحی وب در بخش‌های قبل و بعد آن نقطه شکست، بطور متفاوت رفتار کنند.

از یک Media Query برای اضافه‌کردن نقطه شکست در ۷۶۸ پیکسل استفاده کنید:

مثال

هنگامی که صفحه نمایش (پنجره مرورگر) کمتر از ۷۶۸ پیکسل شود، هر ستون باید عرض ۱۰۰٪ داشته باشد:

/* For desktop: */
/* برای رایانه‌های رومیزی*/
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
/*برای موبایل‌ها*/
  [class*="col-"] {
    width: 100%;
  }
}


همیشه ابتدا برای موبایل طراحی کنید

Mobile First یعنی پیش از طراحی برای دستگاه‌های رومیزی یا سایر دستگاه‌ها، ابتدا طراحی را برای موبایل انجام دهید (این کار سبب می‌شود صفحه در دستگاه‌های کوچکتر، سریعتر نمایش داده شود).

این یعنی ما باید تغییراتی در CSS خود انجام دهیم.

به جای تغییر استایل‌های مربوط به زمانی که عرض کمتر از ۷۶۸ پیکسل می‌شود، باید طراحی را برای زمانی که عرض بیشتر از ۷۶۸ پیکسل می‌شود، تغییر دهیم. این کار، طراحی ما را Mobile First می‌کند.

مثال

/* For desktop: */
/*برای رایانه‌های رومیزی*/
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
/*برای موبایل‌ها*/
  [class*="col-"] {
    width: 100%;
  }
}

نقطه شکست دیگر

می‌توانید به تعداد دلخواه، نقطه شکست اضافه کنید.

همچنین یک نقطه شکست بین تبلت‌ها و موبایل‌ها اضافه می‌کنیم.

ین کار را با اضافه‌کردن یک media query بیشتر (در ۶۰۰ پیکسل) و مجموعه ای از کلاس‌های جدید برای دستگاه‌های بزرگتر از ۶۰۰ پیکسل (اما کوچکتر از ۷۶۸ پیکسل) انجام می‌دهیم:

مثال

دقت کنید که دو مجموعه کلاس، تقریباً مشابه هستند، تنها تفاوت نام (col- و col-s) است:

/* For mobile phones: */
/*برای گوشی‌های موبایل:*/
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
/*برای رایانه‌های رومیزی:*/
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

ممکن است عجیب به نظر برسد که دو مجموعه کلاس مشابه داریم، اما این کار در HTML به ما این شانس را می‌دهد که تصمیم بگیریم در هر نقطه شکست، چه اتفاقی برای ستون‌ها بیفتد:

مثال HTML

برای رایانه رومیزی:

بخش‌های اول و سوم هرکدام به اندازه ۳ ستون گسترش می‌بایند. بخش میانی ۶ ستون گسترش می‌یابد.

برای تبلت‌ها:

بخش اول ۳ ستون، بخش دوم ۹ ستون گسترش می‌باید و بخش سوم پایین دو بخش اول نمایش داده خواهد شد و به اندازه ۱۲ ستون گسترش می‌باید:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>


نقاط شکست دستگاه‌های معمولی

هزاران صفحه نمایش و دستگاه با عرض و ارتفاع متفاوت وجود دارد، بنابراین ایجاد نقطه شکست دقیق برای هر دستگاه مشکل است. برای ساده کردن مسائل، می‌توان پنج گروه را مورد نظر قرار داد:

مثال

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

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

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

می‌توانید مجموعه ای از ویژگی‌های CSS را فقط زمانی به کار ببرید که عرض پنجره مرورگر بیشتر از ارتفاع آن است، یعنی همان جهت‌یابی «افقی» (Landscape):

مثال

این صفحه وب یک پس زمینه آبی روشن خواهد داشت اگر جهت‌یابی به حالت افقی باشد:

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

پنهان کردن عناصر با Media queryها

استفاده رایج دیگر از Media queryها، پنهان کردن عنصرها در اندازه‌های متفاوت صفحه نمایش است:

من در صفحه نمایش‌های کوچک پنهان می‌شوم.

مثال

/* If the screen size is 600px wide or less, hide the element */
/*اگر اندازه عرض صفحه نمایش ۶۰۰ پیکسل یا کمتر باشد، عنصر را پنهان می‌کند*/
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

تغییر اندازه قلم با Media queryها

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

اندازه قلم متغیر.

مثال

/* If the screen size is 601px or more, set the font-size of <div> to 80px */
/* اگر اندازه صفحه نمایش ۶۰۱ پیکسل یا بیشتر باشد، اندازه قلم <div> را برابر با ۸۰ پیکسل تنظیم می‌کند*/
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* If the screen size is 600px or less, set the font-size of <div> to 30px */
/* اگر اندازه صفحه نمایش برابر با ۶۰۰ پیکسل یا کمتر باشد، اندازه قلم <div> را برابر با ۳۰ پیکسل تنظیم می‌کند*/
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}


مرجع @media در CSS

برای مرور کامل همه انواع media و عبارات/ویژگی‌ها، لطفاً به قاعده @media در مرجع CSS ما مراجعه کنید.

منابع آموزشی