Още за медийните заявки

Истинската сила на медийните заявки

Медийните заявки не се ограничават само до ширина на екрана – те могат да таргетират конкретен тип устройство или начин на визуализация. Можете да зададете стилове само за екран, само при принтиране или да използвате логически оператори като отрицание и „или“. Най-важното е да разберете, че с правилна комбинация от условия можете да контролирате кога точно да се прилагат дадени CSS стилове.

Как да тествате различни типове медии и условия

1. Създайте медийна заявка за екран с максимална ширина 600px и добавете стил (например червен фон).
2. Добавете тип screen и оператор and, за да ограничите изпълнението само при екран и конкретна ширина.
3. Пробвайте с handheld – ще видите, че стилът няма да се приложи в десктоп браузър.
4. Използвайте print, за да приложите стилове само при принтиране.
5. Добавете оператора not, за да обърнете логиката на условието.
6. Разделете условия със запетая, за да създадете „или“ логика между различни медийни заявки.

Основни CSS конструкции от урока

• @media screen and (max-width: 600px) – Прилага стилове само при екран до 600px ширина.
• @media print – Активира стилове при принтиране.
• not – Оператор за отрицание на медийно условие.
• , (запетая в @media) – Добавя алтернативно условие (логическо „или“).
• (min-width: 800px) – Условие за минимална ширина на екрана.

Тези техники ви дават прецизен контрол върху responsive поведението и подготовката на страницата за печат.