آموزش media query در css

از media query برای محدود کردن دستورات css به دستگاه ها یا صفحات نمایش با شرایط خاص استفاده می شود. مثلا تنظیم می کنیم برای عرض صفحه کمتر از 400 پیکسل چه قوانینی از css به صفحه وب اعمال شوند.

آموزش media query در css
Article مجازی

media query را می توان مثل یک شرط برای مرورگر دید که اگر آن شرط بر قرار باشد مرورگر استایل های مشخص شده را تفسیر و اعمال می کند. از media query ها برای پیوند یک شیوه نامه با یک دستگاه خاص یا لیستی از دستگاه ها استفاده می شود. برای ایجاد یک media query در یک فایل HTML ، ویژگی زیر را به link اضافه کنید:

media: "devices"

که در آن devices لیستی از انواع رسانه های پشتیبانی شده با یک شیوه نامه مشخص است. به عنوان مثال، عنصر link زیر فقط وقتی دستگاه، پرینتر یا پروژکتور است فایل output.css را به HTML اضافه می کند.

اگر دستگاه دیگری به این صفحه وب دسترسی پیدا کند، فایل output.css را بارگذاری نمی کند. در جدول زیر انواع مقادیر ممکن رسانه را برای ویژگی media لیست شده است.

انواع رسانه استفاده برای
all همه دستگاه های خروجی (بطور پیش فرض)
braille دستگاه های بازخورد لمسی بریل
embossed چاپگرهای صفحه ای بریل
handhelp دستگاه های تلفن همراه با صفحه های کوچک و پهنای باند محدود
print چاپگرها
projection پروژکتورها
screen صفحه نمایش رایانه
speech ترکیب کننده های گفتار و صدا و مرورگرهای شنیداری
tty دستگاه های پهنای ثابت مانند ماشین های teletype و پایانه ها
tv دستگاه های نوع تلویزیون با وضوح پایین، رنگ و قابلیت پیمایش محدود

هنگامی که از هیچ ویژگی رسانه ای استفاده نمی شود، فرض می شود شیوه نامه برای کلیه دستگاه های دسترسی به صفحه وب اعمال شود.

 

1- قانون media@

از media query همچنین می توان برای پیوند قوانین خاص با دستگاه های خاص در CSS استفاده کرد:

@media devices {
style rules
}

اینجا devices انواع رسانه هایی است که پشتیبانی می شوند و style rules عبارتند از قوانین css همراه با دستگاه های آن. به عنوان مثال، شیوه نامه زیر به سه بخش تقسیم می شود: قانون اولیه که رنگ فونت همه عناوین h1 را بدون در نظر گرفتن دستگاه تعیین می کند، بخش دوم که اندازه فونت را برای h1 در صفحه نمایش یا دستگاه های تلویزیونی تعیین می کند، و سوم بخشی است که اندازه فونت را برای h1 هنگام چاپ تعیین می کند:

h1 {
   color: red;
} 

@media screen, tv {
h1 {
      font-size: 2em;
   }
}

@media print {
h1 {
      font-size: 16pt;
   }
}

توجه داشته باشید که در این شیوه نامه، اندازه فونت برای دستگاه های صفحه نمایش و تلویزیون با استفاده از واحد نسبی em بیان می شود اما اندازه فونت برای دستگاه های چاپی با استفاده از pt بیان می شود که برای اندازه متوسط اندازه ای مناسب تر است.

همچنین می توانید با افزودن نوع رسانه به قانون import@، دستگاه ها را هنگام وارد کردن یک شیوه نامه اضافه کنید. بنابراین، قانون CSS زیر فقط برای وقتی که از صفحه نمایش یارانه یا پروژکتورها استفاده شود، فایل screen.css را وارد می کند:

@import url(“screen.css”) screen, projection;

انتظار اولیه این بود که نمایش داده شده رسانه ها می توانند دستگاه های تلفن همراه از نوع handhelp را هدف قرار دهند. با این حال، به عنوان وضوح صفحه نمایش به حدی بهبود می یابد که قطع ارتباط بین موبایل، رایانه لوحی، لپ تاپ و دسک تاپ دیگر واضح نبود، media query ها براساس ویژگی های یک دستگاه پشتیبانی می شوند و نه بر اساس آنچه دستگاه نامیده می شود.

از media query ها می توان با تعیین یک خصوصیت از صفحه نمایش نیز استفاده کرد.

media:"devices and|or (feature:value)"

که در آن feature نام یک ویژگی رسانه مانند عرض صفحه نمایش است و value مقدار آن ویژگی است. کلمات کلیدی and یا or هم دستگاه و ویژگی را با هم ترکیب می کنند.

قوانین media@ و import@ نیز از روش مشابه استفاده می کنند:

@media devices and|or (feature:value) {
style rules
}

و

@import url(url) devices and|or (feature:value);

به عنوان مثال، media query زیر قوانین را فقط برای دستگاه های با صفحه نمایش با عرض 320 پیکسل اعمال می کند.

@media screen and (device-width: 320px) {
style rules
}

جدول زیر لیستی از ویژگی های دستگاه هایی است که می توان به جای feature استفاده کرد.

ویژگی تشریح
aspect-ratio نسبت عرض صفحه نمایش به ارتفاع آن
color تعداد بیت در هر جزء رنگی دستگاه خروجی؛ اگر دستگاه از رنگ پشتیبانی نمی کند، مقدار 0 است
color-index تعداد رنگ های پشتیبانی شده توسط دستگاه خروجی
device-aspect-ratio نسبت عرض دستگاه به مقدار ارتفاع دستگاه
device-height ارتفاع سطح دستگاه خروجی
device-width عرض سطح دستگاه خروجی
height ارتفاع صفحه نمایشگر دستگاه خروجی
monochrome تعداد بیت در هر پیکسل در بافر دستگاه است
orientation برابر portrait است وقتی ارتفاع صفحه نمایش از عرض بیشتر باشد. در غیر این صورت برابر است با landscape
resolution وضوح دستگاه خروجی. هر dpi (نقطه در هر اینچ) یا dpcm (نقاط در سانتی متر)
width عرض صفحه نمایش دستگاه خروجی

تمام ویژگی های رسانه در جدول بالا، به استثنای orientation، پیشوندهای min و max را نیز قبول می کنند، به عبارتی که min حداقل ویژگی را برای ویژگی مشخص شده و max حداکثر مقدار ویژگی را فراهم می کنند. بنابراین، media query زیر قوانین را فقط برای دستگاه های صفحه نمایش رایانه که عرض آنها حداکثر 700 پیکسل است اعمال می کند:

@media screen and (max-width: 700px) {
style rules
}

به همین ترتیب، media query زیر قوانین را فقط در صفحه هایی که حداقل 400 پیکسل عرض دارند اعمال می کند:

@media screen and (min-width: 400px) {
style rules
}

می توانید چندین ویژگی رسانه را با استفاده از اپراتورهای منطقی مانند and ، not و or ترکیب کنید. دستور زیر قوانین را برای انواع رسانه ها اعمال می کند اما فقط در صورتی که عرض دستگاه های خروجی بین 320 تا 480 پیکسل باشد (شامل):

@media all and (min-width: 320px and max-width: 480px) {
style rules
}

عبارت زیر فقط برای دستگاه های رسانه ای که صفحه نمایش ندارند و حداکثر عرض 480 پیکسل را دارند اعمال می شود:

@media not screen and (max-width: 480px) {
style rules
}

برای برخی از ویژگی ها، نیازی به تعیین مقدار نیست. بلکه صرفاً وجود ویژگی را بیان می کنید. عبارت زیر با هر دستگاه صفحه ای که از رنگ پشتیبانی می کند مطابقت دارد:

@media screen and (color) {
style rules
}

در آخر، برای مرورگرهای قدیمی که از media query پشتیبانی نمی کنند، CSS3 کلمه کلیدی only برای پنهان کردن شیوه نامه ها از آن مرورگرها را ارائه می دهد. در کد زیر، در مرورگرهای قدیمی only به عنوان نام دستگاه پشتیبانی نشده تفسیر می شوند و از این رو قوانین را اعمال نمی کنند، در حالی که مرورگرهای جدیدتر کلمه کلیدی را تشخیص داده و به اجرای قوانین سبک ادامه می دهند.

@media only screen and (color) {
style rules
}
2- طراحی واکنش گرا

اگر بخواهید طرحی ارائه دهید که در صفحات نمایش مختلف به خوبی کار کرد (واکنش گرا باشد) مثلا برای دستگاه های تلفن همراه، یک طراحی متفاوت برای تبلت ها و در نهایت طرحی برای رایانه های شخصی آنگاه می توانید از media query ها استفاده کنید.

از طراحی موبایل برای عرض صفحه تا 480 پیکسل استفاده خواهد شد، از طراحی تبلت برای عرض هایی از 481 پیکسل تا 768 پیکسل استفاده می شود و از طراحی دسک تاپ برای عرض صفحه نمایش بیش از 768 پیکسل استفاده خواهد شد. برای استفاده از این رویکرد، یک شیوه نامه ایجاد می کنید که دارای ساختار زیر است:

/* Base Styles */
style rules
/* Mobile Styles */
@media only screen and (max-width: 480px) {
style rules
}
/* Tablet Styles */
@media only screen and (min-width: 481px) {
style rules
}
/* Desktop Styles */
@media only screen and (min-width: 769px) {
style rules
}

توجه داشته باشید که این شیوه نامه از اصل mobile first استفاده می کند که در آن طراحی کلی صفحه با قوانین پایه شروع می شود که در مورد کلیه دستگاه ها اعمال می شود و به دنبال آن قوانین مربوط به دستگاه های تلفن همراه اعمال می شود. در عرض صفحه نمایش بین 481 پیکسل تا 768 پیکسل قوانین نوشته شده برای تبلت ها اعمال می شوند. هنگامی که عرض صفحه از 768 پیکسل بالاتر می رود، قوانین رایانه های شخصی اعمال می شوند بنابراین، با افزایش عرض صفحه، ویژگی های بیشتری را اضافه می کنید یا ویژگی های موجود در دستگاه های کوچکتر را جایگزین می کنید. در نهایت طرحی خواهید داشت که به خوبی روی هر صفحه نمایشی، ظاهر می شود.

 

محتوا
  • - آموزش Media Query در CSS

  • آموزش media query در css

توسعه وب / HTML-CSS