Быстрая и удобная резиновая верстка через vw и rem
Часто требуется быстро сверстать страницу, с поддержкой хотя бы наиболее распространенных устройств и браузеров, притом чтобы выглядела страница одинакова для любой ширины экрана, строго по дизайн макету. Не уж то у вас не было такой ситуации, когда дизайн получаешь в двух размерах - для десктопа с шириной 1440px и мобайл 320 или 375 (еще и pixel perfect), а на вопрос как страница должна выглядеть для других размеров, например для планшетов или маленьких дисплеев, получаешь вполне адекватный ответ заказчика или дизайнера - красиво.
После некоторых экспериментов с относительными единицами, я пришел к довольно таки приятному, в плане удобства, методу верстки (скорее всего не я первый). Хотя безусловно он имеет и свои минусы, которые критичны в некоторых проектах.
Для достижение такой резиновости, что представлена на гифке сверху, потребуется указывать все размеры элементов, отступов, размеров шрифтов и проч. в относительном ширине окна - vw. Если дизайн представлен в размере 1440px, а элемент с размерами 300px x 200px то соотношение их от всей шириной макета будет 300 / 1440 ≈ 0,2, а в vw 0,069 * 100 = 20vw и 13.8vw соответсвенно. Так соотношение сторон элемента всегда будет одинаковым для любой ширины окна браузера. Так же и с размерами шрифтов, высоты строк, отступов и проч.
Но высчитывать, округлять и указывать в долях каждый размер точно не ускорит верстку, а только добавит нудной калькуляций. Поэтому прибегнем к rem. Rem - задаёт размер относительно шрифта <html> , пропишем <html> такое соотношения:
html {font-size: calc(1vw / 14.4)} /* 100vw / 1440 */Смысл расчета понятен - 1 rem равен отношению всей ширины экрана (100vw) к той величине относительно которого мы указываем размеры (1440), иначе сколько px содержится в одной vw для данного размера макета.
Теперь для определение размера достаточно указывать в rem, для примера выше - 300rem и 200rem. Отношение размеров сохраняется при любой ширине окна браузера. Для ширины 1440px гарантированно будем иметь 300px ширины и 200px высоты.
Стоит учитывать что при такой верстки 1440rem (или та ширина макета относительно которого вы верстаете) это 100vw. А задание ширины блока 100vw в Linux и Windows вызовет появление горизонтального скролла так как вертикальный скроллбар является частью окна браузера. Поэтому не стоит превышать общую ширину всех элементов больше чем 1440rem. Или, если условия позволяют, использовать %.
Для удобства верстки относительно другой ширины, например для верстки мобайл (320px) можно просто поменять соотношения через media и указывать уже размеры которые даны в макете:
@media screen and (max-width: 480px) {
html {font-size: calc(1vw / 3.2)}
}Для ультрашироких 4k мониторов можно прописать media снизу чтобы зафиксировать размеры в той максимальной ширине относительно которого верстаете:
@media screen and (min-width: 2560px) {
html {font-size: calc(1vw / 3.2)}
}Минусы у этого метода конечно же есть:
фактически отсутсвует возможность браузерного масштабирования, из за использования vw
неполная поддержка calc и vw в браузере IE
Спасибо за внимание. Буду рад почитать вашу конструктивную критику