Real Time Web Analytics کانال تلگرام لرن روت

CSS

معرفی media@ در CSS

نویسنده : محمد مظفری
تاریخ انتشار:
00:27:50 1394-07-11
media,css,responsive,html

شاید تا به حال برای شما پیش آمده باشد که خواسته باشید سایت شما بر روی همه دستگاهها به درستی نمایش داده شود. این کار را به کمک قانون media@ در CSS می توان انجام داد. برای ادامه این مقاله با لرن روت همراه باشید.

media@ که برای اولین بار در CSS2 معرفی شد ، به شما اجازه می دهد که به سایت خود قابلیت responsive شدن بدهید. media@ به شما این امکان را می دهد که بتوانید اندازه خروجی (سایز دستگاه) مورد نظر را بیابید و برای هر کدام استایل متفاوتی طراحی کنید.

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

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

نحوه کار:

برای استفاده از media@ شما باید در فایل CSS خود از دستور زیر پیروی کنید:

@media not|only mediatype and (media feature) {
    CSS-Code;
}

در اینجا mediatype می تواند شامل یکی از گزینه های زیر باشد:

all = برای تمام صفحات

print = برای چاپگر ها

screen = برای مانیتور ها، تبلت ها، موبایل ها

speech = برای دستگاههایی که صفحه نمایش شما را با صدا اجرا می کنند.(Screen Reader ها)

و همچنین media feature ها نیز می تواند شامل یکی از گزینه های زیر باشد:

aspect-ratio / color / color-index / device-aspect-ratio / device-height / device-width / grid / height / max-aspect-ratio / max-color / max-color-index / max-device-aspect-ratio / max-device-height / max-device-width / max-height / max-monochrome / max-resolution / max-width / min-aspect-ratio / min-color / min-color-index / min-device-aspect-ratio / min-device-width / min-device-height / min-height / min-monochrome / min-resolution / min-width / monochrome / orientation / overflow-block / overflow-inline / resolution / scan / update-frequency / width

البته می توانید به کمک کد زیر صفحات استایل متفاوتی به صورت جداگانه داشته باشید؛

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="yourCss.css">

 

برچسب ها:
مقالات مشابه