قانون @media، که در CSS2 معرفی شد، این امکان را فراهم می‌کند تا قوانین استایل مختلفی برای دستگاه‌ها و محیط‌های مختلف تعریف شود.
در CSS3، کوئری‌های رسانه‌ای (Media Queries) گسترش یافته‌اند و به جای تمرکز بر نوع دستگاه، به قابلیت‌های دستگاه توجه دارند.
مواردی که می‌توان با کوئری‌های رسانه‌ای بررسی کرد:
- عرض و ارتفاع نمای صفحه (Viewport)
- جهت نمای صفحه (افقی یا عمودی)
- رزولوشن
استفاده از کوئری‌های رسانه‌ای یک روش محبوب برای ارائه استایل‌های شخصی‌سازی‌شده به دستگاه‌هایی مانند دسکتاپ‌ها، لپ‌تاپ‌ها، تبلت‌ها و موبایل‌ها است.
انواع رسانه در CSS (CSS Media Types)
| مقدار | توضیحات |
|---|
| all | برای همه انواع دستگاه‌ها |
| برای حالت پیش‌نمایش چاپ |
| screen | برای صفحه‌نمایش‌های کامپیوتر، تبلت‌ها، گوشی‌های هوشمند و غیره |
ویژگی‌های رایج در کوئری‌های رسانه‌ای (CSS Common Media Features)
| مقدار | توضیحات |
|---|
| orientation | جهت نمای صفحه: افقی یا عمودی |
| max-height | حداکثر ارتفاع نمای صفحه |
| min-height | حداقل ارتفاع نمای صفحه |
| height | ارتفاع نمای صفحه (شامل نوار اسکرول) |
| max-width | حداکثر عرض نمای صفحه |
| min-width | حداقل عرض نمای صفحه |
| width | عرض نمای صفحه (شامل نوار اسکرول) |
سینتکس کوئری‌های رسانه‌ای (Media Query Syntax)
یک کوئری رسانه‌ای شامل یک media type بوده و می‌تواند شامل یک یا چند ویژگی رسانه‌ای باشد که به true یا false تبدیل می‌شوند.
@media not|only mediatype and (media feature) and (media feature) {
/* CSS Code */
}- media type اختیاری است (در صورت حذف، به‌طور پیش‌فرض مقدار
allتنظیم می‌شود). اما اگر از کلمات کلیدیnotیاonlyاستفاده کنید، باید حتماً media type را مشخص کنید. - کوئری زمانی به true تبدیل می‌شود که media type با دستگاه مطابقت داشته باشد و تمام ویژگی‌های رسانه‌ای نیز true باشند. در این صورت، استایل‌های مربوط به آن کوئری اعمال می‌شود.
معنی کلمات کلیدی not، only و and:
- not: این کلمه کلیدی معنی کل کوئری را برعکس می‌کند.
- only: از اعمال استایل‌های مربوطه در مرورگرهای قدیمی که از کوئری‌های رسانه‌ای پشتیبانی نمی‌کنند، جلوگیری می‌کند.
- and: این کلمه کلیدی media type را با یک یا چند ویژگی رسانه‌ای ترکیب می‌کند.
لینک به استایل‌های مختلف برای رسانه‌ها و عرض‌های مختلف صفحه:
می‌توانید به فایل‌های استایل مختلف برای رسانه‌های مختلف و عرض‌های متفاوت پنجره مرورگر (نمای صفحه) لینک بدهید:
<link rel="stylesheet" media="print" href="print.css">
<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="screen and (min-width: 480px)" href="example1.css">
<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="example2.css">مثال‌های ساده از کوئری‌های رسانه‌ای
یکی از روش‌های استفاده از کوئری‌های رسانه‌ای، نوشتن بخشی از CSS به صورت مستقیم در داخل فایل استایل است.
مثال: تغییر رنگ پس‌زمینه
در این مثال، اگر عرض نمای صفحه 480 پیکسل یا بیشتر باشد، رنگ پس‌زمینه به سبز روشن تغییر می‌کند و در غیر این صورت، صورتی خواهد بود:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}مثال: منو با شناوری (Float)
در این مثال، اگر عرض نمای صفحه 480 پیکسل یا بیشتر باشد، منو به سمت چپ صفحه شناور می‌شود. در غیر این صورت، منو بالای محتوا قرار می‌گیرد:
@media screen and (min-width: 480px) {
#leftsidebar {
width: 200px;
float: left;
}
#main {
margin-left: 216px;
}
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام