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

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

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