Здравствуйте. Наверняка вы уже не раз сталкивались с вопросом — как верстать для планшетов, телефонов?Есть много способов таких как Bootstrap, резиновая верстка и т.д. Но есть ещё один способ, который меня очень заинтересовал. А именно для каждого расширения, или же диапазона от — до можно писать свои стили и т.д. Все что надо, это в файлах ваших стилях начать писать вот так:
1 2 3 | @media (max-width: 930px) { /* это будет показано при разрешении монитора до 930 пикселей */ тут пишем свои стили } @media (max-width: 930px) and (min-width: 470px) { /* для разрешения экрана от 470 до 930 пикселей */ тут пишем свои стили } @media (max-width: 469px) { /* если максимальное разрешение экрана составит 469 пикселей */ тут пишем свои стили } |
Что же делает данный формат кода? Суть состоит в том, что мы сообщаем браузеру какой участок css кода должен работать на конкретном расширении телефона. Например, если вы заходите с телефона с экраном HD то в вертикальном положении, скорее всего сработает media запрос от от 470 до 640 пикселей. Но если вы перевернете телефон в горизонтальное положение, сработает запрос 768. Прелесть в том, что вы можете стилизировать ваш сайт вплоть до вертикального, или горизонтального положения телефона.
Так же советую ознакомится какие же экраны устройств встречаются:- Мобильные телефоны — от 320px. Ориентируемся на viewport iPhone , т.к. он самый маленький. У современных Android viewport больше, поэтому их игнорируем (растянется на верстке).
- Планшеты от 768px. Опять-таки ориентируемся на iPadв портретной ориентации , т.к. у Android планшетов viewport обычно имеют размер от 800×1200 или совпадают с iPad. Планшеты с viewport 600×1024px устарели. К тому же ничего страшного, если в вертикальной ориентации сайт на таком планшете будет выглядеть как на мобильнике, а в горизонтальной ориентации — как на ПК.
- ПК и планшеты в ландшафтной ориентации — 1000px. Почему 1000, а не 1024: первое, в настольных браузерах полоса прокрутки съедает (обычно) 18px ширины; второе, от 1000px верстальщику удобнее рассчитывать размеры в процентах, а до 1024 все равно растянется при верстке.
Добавить комментарий