Медиазапросы
В CSS включена підтримка різних технічних параметрів пристроїв. Визначається смартфон з маленьким екраном, вказується стильове властивість під його значення. Медиазапросы виявляють відмінності орієнтації: портретна і альбомна. Широко застосовуються для створення адаптивної верстки. Макет підлаштовуватися під зазначений дозвіл екрану, змінюється структура документа у відповідності з кодом.
Визначаються типи пристроїв:
- пристрої braille і принтери embossed для сліпих;
- звичайні принтери print;
- екран монітора screen;
- мовні синтезатори speech;
- телевізори tv.
У значенні імені запитів зазначаються кілька умов. Наприклад, виводити вміст тільки для екранів моніторів і тільки максимальною шириною 600 px. Це виглядає так:
@media screen and (max-width: 600px) { код виводу }.
Адаптивний дизайн будується на використанні медиазапросов. Створюється верстка для екранів, у яких мінімальна ширина 1200 пікселів, тіло коду поміщається в @media screen and (max-width: 1200 px) { }. Далі створюється блок для планшетів @media screen and (min-width: 700px) { } і мобільних пристроїв @media screen and (max-width: 699px) { }.
