Користувачів малих екранів не завжди влаштовуватиме стандартний вигляд сайту: пункти меню, відступи, читабельність тексту — усе це вимагає адаптації під невеликі екрани.
Метатег viewport дозволяє лише адекватно змасштабувати сторінку і текст. Натомість для більш тонкого налаштування використовується @media.
@media all and (max-width: 1024px) {
img{
max-width: 94%;
}
}
@media — це правило, яке вказує тип носія, для якого буде застосовано стилі. Просто вставляємо між { } CSS селектор потрібного об’єкту і він набуватиме чинності за вказаних умов.
Вказати тип носія можна використовуючи ці параметри:
- all — всі типи носіїв;
- speech — голосові синтезатори;
- braille — пристрої, що працюють з текстом Брайля (розраховані для сліпих);
- screen — екран монітора;
- projection — проектор;
- print — друкована версія;
- tv — телеекран;
- handheld — мікрокомп’ютери.
Як Ви напевне зрозуміли, для нас будуть найбільш актуальними параметри screen та print. Можна використовувати відразу кілька параметрів, розділяючи їх комою.
Окрім типів ми можемо вказувати через and додаткові параметри, і тут вибір куди більший:
- aspect-ratio — співвідношення між шириною і висотою області перегляду. Наприклад, може використовуватись як для визначення портретної та горизонтальної версії в мобільних версіях, так і для вичислення типів екрану;
- color…
- color-index…
- device-aspect-ratio — співвідношення між шириною і висотою екрану. В принципі використовується для того ж, що й перший пункт;
- device-height — висота екрану;
- device-width — ширина екрану;
- grid…
- height — висота області перегляду;
- max-aspect-ratio — максимальне співвідношення між висотою та шириною області перегляду;
- max-color…
- max-color-index…
- max-device-aspect-ratio — максимальне співвідношення між висотою та шириною екрану;
- max-device-height — максимальна висота екрану;
- max-device-width — максимальна ширина екрану;
- max-height — максимальна висота області перегляду;
- max-monochrome…
- max-resolution — максимальна роздільна здатність;
- max-width — максимальна ширина області перегляду;
- min-aspect-ratio — мінімальне співвідношення між висотою та шириною області перегляду;
- min-color…
- min-color-index…
- min-device-aspect-ratio — мінімальне співвідношення між висотою та шириною екрану;
- min-device-width — мінімальна ширина екрану;
- min-device-height — мінімальна висота екрану;
- min-height — мінімальна висота області перегляду;
- min-monochrome…
- min-resolution…
- min-width — мінімальна ширина області перегляду;
- monochrome
- orientation — використовується виключно для визначення портретної та горизонтальної версії в мобільних версіях
- overflow-block…
- overflow-inline…
- resolution…
- scan…
- update-frequency…
- width — ширина області перегляду;
На жаль, я не мав справу зі всіма властивостями, тому просто залишу їх не виділеними.
P.S. І щоб двічі не ставати варто пояснити різницю між width та device-width, тобто вікном (областю) перегляду та девайсом. В першому варіанті мова йде про оглядову ширину браузера (без його стінок та полоси прокрутки). В іншому — про увесь розмір екрану. Незнання цієї особливості може створювати негаразди в подальшому 🙂