يتطلب ذلك استخدام استفسارات الوسائط ذات العرض الناقص لاستهداف الأجهزة بأحجام شاشة محددة. ومع ذلك ، قد يكون الأمر مربكًا عند الكتابة فوق قيم CSS لقرارات الشاشة العليا ، حيث يبدو أن العروض المنخفضة السفلية لها الأسبقية. في المثال المقدم:

@Media Screen فقط و (Min-Width: 600px) { H2 {font-size: 2.2em ؛ } } MEDIA SCREEN فقط و (MIN-WIDTH: 320px) { H2 {font: Normal 1.7em/2.1em helvetica ، sans-serif ؛ } }

كلا استعلامات الوسائط صحيحة عندما يكون عرض الشاشة 600 بكسل أو أكبر. ومع ذلك ، تحدث القاعدة الثانية في وقت لاحق في الشلال ، لذلك تأخذ الأسبقية ويتم تطبيق حجم الخط 1.7 أصغر.

الاستعلامات:

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

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