Техно-мир

При помощи значений, указанных в процентах, довольно просто создавать веб-дизайны, способны подстраиваться под ширину и высоту окон просмотра. Возможно, вскоре нам придется делать это на ежедневной основе, так как становится все больше и больше пользователей смартфонов и мобильных устройств. Не столь важно, текстовый блог это, изображения или что-нибудь еще, — все должно уметь адаптироваться.Однако применение процентных значений – это не всегда наилучшая опция определения размеров. Подумайте о размерах шрифтов. Размер шрифта нельзя указать так, чтобы он реагировал на изменения ширины окна браузера. По крайней мере, точно не в процентах. CSS3 представляет нам новые единицы изменения, которые помогают обойти эту проблему.

Единицы изменения vieport для более гибкого определения размеров

Единицы изменения vw и vh определяют ширину/высоту относительно размера окна. Мы используем vw для указания ширины и vh – для высоты. Эти так называемые единицы измерения окна просмотра позволяют нам указывать размеры относительно текущего размера окна браузера.

div {
  width: 50vw;
  height: 100vh;
}

Элемент в нашем примере занимает 50% ширины и 100% высоты окна. В то время как значения в процентах всегда действуют относительно размеров родительского элемента, эти единицы изменения действуют относительно размеров окна. У нас даже есть возможность определять высоту относительно ширины и наоборот.

div {
  height: 50vw;
}

Наш пример указывает, что высота элемента должна составлять 50% ширины окна. Уменьшение ширины окна приведет к изменению высоты элемента.

Подстраиваем размер шрифта благодаря новым единицам измерения

Если вам хочется сохранить на странице читаемые шрифты, то возможно вам следует удостовериться в том, что используются подходящие размеры, вне зависимости от того, на каком устройстве просматривается сайт. Особенное внимание следует уделить большим заголовкам, так как они чаще всего выглядят ужасно. Используйте viewport units для того, чтобы указать размер шрифта относительно ширины окна браузера.

h1 {
  font-size: 10vw;
}

В нашем примере показано, что font size должен составлять 10% от ширины окна. Благодаря vw размер шрифта для h1 всегда будет подстраиваться под размеры окна браузера.

Указываем размеры в зависимости от соотношения сторон

Вдобавок к vw и vh, в наше распоряжение также поступили единицы vmin и vmax. При помощи vmin мы определяем размер либо в соответствии с высотой окна, либо в соответствии с его шириной, в зависимости от того, какое значение будет меньше. Если ширина меньше высоты, то vmin будет подстраиваться под ширину. Теперь вы можете примерно представить, что же делает vmax. Да-да, то же самое, только с самым большим значением.

div {
  width: 2vmin;
}

В данном примере наш элемент имеет ширину равную 20% от ширины окна, в то время как ширина окна меньше ее высоты. Если высота меньше ширины, то размер элемента будет определяться относительно высоты окна. Все довольно просто, нужно только привыкнуть.

Браузерная поддержка

Вы не поверите, но viewport units поддерживается всеми современными браузерами. Даже Internet Explorer отлично работает с этими значениями, но только начиная от 10 версии. Firefox добавили соответствующую поддержку в версии 19, а Chrome – в 20.

Вернуться назад