بنية جديدة لاستعلامات وسائط النطاق

تعرَّف على كيفية تسهيل هذه البنية الجديدة طلبات البحث عن الوسائط.

Rachel Andrew

فعّلت طلبات الاستعلام عن الوسائط التصميم السريع الاستجابة، وتستخدِم حوالى %80 من المواقع الإلكترونية التي تستخدِم طلبات الاستعلام عن الوسائط ميزات النطاق التي تتيح اختبار الحد الأدنى والحد الأقصى لحجم مساحة العرض. تتضمّن مواصفات المستوى 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.
}

يمكن لبناء الجملة هذه تبسيط طلبات البحث، خاصةً عند الاختبار بين عرضَي عرض. في المثال التالي، تختبر طلب البحث عن الوسائط إطار عرض بحد أدنى للعرض يبلغ 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 عرضًا بحجم 400 بكسل أو أكثر. يتيح لك أسلوب الصياغة الجديد التعبير بوضوح أكبر عن ما تعنيه وتجنُّب احتمال حدوث تعارض بين طلبات البحث.

لاستخدام بنية النطاق الجديدة مع مراعاة المتصفّحات التي لم تنفّذها بعد، يتوفّر مكوّن PostCSS الإضافي الذي سيعيد كتابة البنية الجديدة إلى البنية القديمة في أوراق الأنماط.