Як верстати для планшетів, телефонів? Для кожного свої стилі

Вітаю. Напевно, ви вже не раз стикалися з питанням — як верстати для планшетів, телефонів? Є багато способів, таких як Bootstrap, гумова верстка тощо. Але є ще один спосіб, який мене дуже зацікавив. А саме для кожного розширення, або ж діапазону від — до можна писати свої стилі і т.д. Все, що потрібно, це у файлах ваших стилів почати писати ось так:

Що ж робить цей формат коду? Суть полягає в тому, що ми повідомляємо браузеру, який фрагмент css коду повинен працювати на конкретному розширенні телефону. Наприклад, якщо ви заходите з телефону з екраном HD, то у вертикальному положенні, скоріш за все, спрацює media-запит від 470 до 640 пікселів. Але якщо ви перевернете телефон у горизонтальне положення, спрацює запит 768 пікселів. Перевага в тому, що ви можете стилізувати ваш сайт аж до вертикального або горизонтального положення телефону.

Також раджу ознайомитися з тим, які екрани пристроїв зустрічаються:

1. Мобільні телефони — від 320px. Орієнтуємось на viewport iPhone, оскільки він найменший. У сучасних Android viewport більший, тому їх ігноруємо (розтягнеться на верстці).
2. Планшети від 768px. Знову ж таки, орієнтуємось на iPad у портретній орієнтації, оскільки у Android планшетів viewport зазвичай має розмір від 800×1200 або збігається з iPad. Планшети з viewport 600×1024px застаріли. До того ж, нічого страшного, якщо у вертикальній орієнтації сайт на такому планшеті виглядатиме як на мобільному, а в горизонтальній — як на ПК.
3. ПК і планшети в ландшафтній орієнтації — 1000px. Чому 1000, а не 1024: по-перше, у настільних браузерах смуга прокрутки зазвичай займає 18px ширини; по-друге, від 1000px верстальнику зручніше розраховувати розміри у відсотках, а до 1024px все одно розтягнеться при верстці.

Загалом це все. Якщо у вас є запитання, пишіть їх у коментарі, і ми з радістю вам допоможемо. Дякую за увагу.