دریابید که چگونه این نحو جدید می تواند پرس و جوهای رسانه را ساده کند.
Media Queries طراحی واکنش‌گرا را فعال کرده است و ویژگی‌های محدوده که آزمایش حداقل و حداکثر اندازه نمای درگاه را ممکن می‌سازد ، توسط حدود ۸۰٪ سایت‌هایی که از جستجوهای رسانه استفاده می‌کنند استفاده می‌شود. مشخصات Media Queries سطح 4 شامل یک نحو بهبود یافته برای این جستجوهای محدوده است.
مثال های زیر نشان می دهد که چگونه می تواند پرس و جوهای شما را ساده کند.
یک تست معمولی پرس و جو رسانه برای حداقل عرض درگاه نمایش، به صورت زیر نوشته می شود:
@media (min-width: 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
نحو جدید امکان استفاده از عملگر مقایسه را فراهم می کند:
@media (width >= 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
آزمایش برای حداکثر عرض:
@media (max-width: 30em) {
// Styles for viewports with a width of 30em or less.
}
و نسخه با استفاده از نحو سطح 4:
@media (width <= 30em) {
// Styles for viewports with a width of 30em or less.
}
این نحو دارای پتانسیل ساده‌سازی پرسوجوها، به‌ویژه هنگام آزمایش بین دو عرض است. در مثال زیر، پرس و جو رسانه ای برای یک Viewport با حداقل عرض 400 پیکسل و حداکثر عرض 600 پیکسل آزمایش می کند.
@media (min-width: 400px) and (max-width: 600px) {
// Styles for viewports between 400px and 600px.
}
این را می توان در نحو جدید به صورت زیر بازنویسی کرد:
@media (400px <= width <= 600px ) {
// Styles for viewports between 400px and 600px.
}
ویژگی که شما در حال آزمایش آن هستید، در این مورد width ، بین دو مقدار قرار می گیرد.
سینتکس جدید علاوه بر اینکه پرس و جوهای رسانه ای را کم تر می کند، از مزیت دقت نیز برخوردار است. پرس و جوهای min- و max- شامل مقادیر مشخص شده هستند، برای مثال min-width: 400px برای عرض 400px یا بیشتر تست می کند. نحو جدید به شما این امکان را می‌دهد که منظورتان را واضح‌تر نشان دهید و از احتمال برخورد پرسوجوها اجتناب کنید.
برای استفاده از سینتکس محدوده جدید در حالی که برای مرورگرهایی که هنوز آن را پیاده‌سازی نکرده‌اند، یک پلاگین PostCSS وجود دارد که دستور جدید را به قدیمی در شیوه نامه شما بازنویسی می‌کند.