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

11.04.2016

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 все равно растянется при верстке.

В общем то и все. Если у вас есть вопросы, пишите их в коментарии и мы с удовольствием вам поможем. Спасибо за внимание

 

UNLIMITED DOWNLOADS: 50+ Million WordPress & Design Assets


Юрий

Действительно, ничего лишнего не написано )))))

Ответить
Ростислав

Не, останавливайся, чувак, наведи порядок у себя на сайте.
За материал ну просто огромное спасибо, ничего лишнего!
Удачи тебе в делах!

Ответить
Digrand

Спасибо! Стараемся )

Ответить

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

Ваш адрес email не будет опубликован.