طراحی Responsive یا واکنش گرا (CSS media types)

برخی از خواص CSS برای نوع خاصی از رسانه طراحی شده است که ممکن است در رسانه ای دیگر به درستی نمایش داده نشود...

برخی از خواص CSS برای نوع خاصی از رسانه طراحی شده است که ممکن است در رسانه ای دیگر به درستی نمایش داده نشود.

برخی از خواص نیز در CSS هستند که در رسانه های مختلف عملکرد متفاوتی دارند، مثلا font-size هم برای صفحه نمایش و هم برای پرینتر مورد استفاده قرار می گیرد ولی شاید با مقادیر مختلف به این معنی که وقتی یک متن داخل صفحه نمایش قرار می گیرد باید فونت درشت تری داشته باشد نسبت به زمانی که متن قرار است در یک صفحه کاغذ قرار گیرد، فونت sans-serif برای صفحه نمایش مناسب است در حالی که فونت serif برای کاغذ مناسبتر است.

با استفاده از دستور @media شما می توانید قواعد CSS را متناسب با نمایشگر های مختلف مانند مانیتور، لپ تاپ، تبلت و موبایل در همان فایل CSS قبلی تغییر دهید.

در مثال زیر با استفاده از دستور @media به این صورت تعریف شده است که اگر متن در صفحه نمایش قرار گرفت با فونت verdana, sans-serif و سایز 17px و چنانچه با استفاده از پرینتر بر روی کاغذ چاپ شد با فونت Georgia, serif و سایز 14px و به رنگ آبی نمایش داده شود.

<!DOCTYPE html>

<html>

<head>

<style>

@media screen {

p {

font-family: verdana, sans-serif;

font-size: 17px;

}

@media print {

p {

font-family: georgia, serif;

font-size: 14px;

color: blue;

}

</style>

</head>

<body>

<h2>The @media Rule</h2>

<p>The @media rule makes it possible to define different style rules for different media types in the same stylesheet.</p>

<p>The style in this example tells the browser to display a 17 pixels Verdana font on the screen. But if the page is printed, it will be in a blue 14 pixels Georgia font.</p>

<p><b>Test it!</b> Print this page (or open Print Preview), and you will see that the text will be displayed in blue, and in another smaller font.</p>

</body>

</html>

سایر انواع رسانه قابل استفاده در media@ :

Media Type	Description
all	Used for all media type devices
aural	Used for speech and sound synthesizers
braille	Used for braille tactile feedback devices
embossed	Used for paged braille printers
handheld	Used for small or handheld devices
print	Used for printers
projection	Used for projected presentations, like slides
screen	Used for computer screens
tty	Used for media using a fixed-pitch character grid, like teletypes and terminals
tv	Used for television-type devices