Герб Украины
Верим в Украину и ВСУ. Слава Украине!

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

1384592023_856863_original

Здравствуйте. Наверняка вы уже не раз сталкивались с вопросом — как верстать для планшетов, телефонов?Есть много способов таких как 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 верстальщику удобнее рассчитывать размеры в процентах, а до 1024 все равно растянется при верстке.
В общем то и все. Если у вас есть вопросы, пишите их в коментарии и мы с удовольствием вам поможем. Спасибо за внимание 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *