دریابید که چگونه این نحو جدید می تواند پرس و جوهای رسانه را ساده کند.
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 وجود دارد که دستور جدید را به قدیمی در شیوه نامه شما بازنویسی می‌کند.