کوئری های رسانه ای واکنش گرا (RWD Media Queries)
«کوئری های رسانه ای (Media Queries)» در CSS3 معرفی شد. این ویژگی با قانون @media تنها زمانی استایل ها را اعمال می کند که شرطی مانند اندازه صفحه برقرار باشد. بنابراین می توانید طرحی انعطاف پذیر و مناسب موبایل و دسکتاپ بسازید.
کوئری های رسانه ای چیست؟
قانون @media یک بلوک CSS را وقتی شرطی درست باشد فعال می کند. شرط می تواند عرض، ارتفاع یا جهت نمایش باشد. در نتیجه طرح شما برای نمایشگرهای مختلف قابل اعتماد می شود.
نمونه ساده
اگر عرض نمایشگر 600px یا کمتر باشد، رنگ پس زمینه تغییر می کند:
@media only screen and (max-width: 600px) { body { background-color: lightblue; } }افزودن یک بریک پوینت
گاهی طرح پایه روی موبایل خوب نیست. در این حالت، یک «بریک پوینت» تعریف کنید تا چیدمان در دو سوی آن متفاوت عمل کند.
@media only screen and (max-width: 600px) { .item1 { grid-area: 1 / span 6; } .item2 { grid-area: 2 / span 6; } .item3 { grid-area: 3 / span 6; } .item4 { grid-area: 4 / span 6; } .item5 { grid-area: 5 / span 6; } }نکته: پایه شبکه را با گرید ویو واکنش گرا بسازید و سپس بریک پوینت ها را اعمال کنید.
چند بریک پوینت متداول
برای سادگی، گروه های عرضی رایج را هدف بگیرید. می توانید قواعد زیر را به عنوان الگو استفاده کنید.
/* تلفن ها، 600px و کمتر */
@media only screen and (max-width: 600px) { /* ... */ }
/* تبلت پرتره و موبایل بزرگ، 600px به بالا */
@media only screen and (min-width: 600px) { /* ... */ }
/* تبلت لنداسکیپ، 768px به بالا */
@media only screen and (min-width: 768px) { /* ... */ }
/* لپ تاپ/دسکتاپ، 992px به بالا */
@media only screen and (min-width: 992px) { /* ... */ }
/* بسیار بزرگ، 1200px به بالا */
@media only screen and (min-width: 1200px) { /* ... */ }کوئری های رسانه ای و جهت صفحه
می توانید بر اساس جهت نمایش هم استایل بدهید. در حالت لنداسکیپ پس زمینه آبی روشن می شود.
@media only screen and (orientation: landscape) { body { background-color: lightblue; } }پنهان سازی و تغییر اندازه با کوئری ها
پنهان سازی عناصر
/* در عرض 600px یا کمتر، عنصر مخفی شود */
@media only screen and (max-width: 600px) { div.example { display: none; } }تغییر اندازه فونت
/* اگر 601px یا بیشتر بود، اندازه فونت بزرگ تر شود */
@media only screen and (min-width: 601px) { div.example { font-size: 80px; } }
/* اگر 600px یا کمتر بود، اندازه فونت کوچک تر شود */
@media only screen and (max-width: 600px) { div.example { font-size: 30px; } }نکته: پیش از هر چیز، ویوپورت واکنش گرا را در <head> تنظیم کنید تا مقیاس گذاری درست شود.
منابع تکمیلی
برای جزئیات بیشتر مستند MDN: @media و راهنمای W3C Media Queries Level 4 را ببینید.