Разрабатывать веб-дизайн, который тянется по ширине или если необходимо по высоте окна браузера очень просто — используя значения процентов. Вероятно, вы делали это неоднократно, оптимизируя свой сайт под планшеты и смартфоны. Независимо от применения элемента, текстовых блоков или изображений, все они настраивались по заданному размеру.
Использование процентных значений не всегда лучшее средство для определения размеров относительно окна браузера, но если вас интересует и эта тема можете изучить ее в моей статье резиновая верстка в css3 с использованием calc. Размер шрифта также необходимо изменять. Размер шрифта не может быть задан под изменение ширины окна браузера, по крайней мере, процентным значением. В CSS3 вводятся новые элементы, которые явно решают эту проблему.
Viewport значения для определенного размера
Значения „vw“ и „vh“ определяют ширину/высоту относительно размера окна. Мы использует „vw“ для представление ширины и „vh“ для представление высоты. Этот так называемый viewport позволяет нам определять размеры относительно окна браузера.
div {
width: 50vw;
height: 100vh;
}
Наш пример элемента займет 50% от ширины окна и 100% от его высоты. В то время как при процентном значении всегда относится к родительскому элементу, то с viewport элемент всегда относятся к размеру окна. Это даже возможно применять для определения высоты по отношению к ширине или наоборот.
div { height: 50vw; }
Пример определяет высоту элемента от 50% ширины окна. Так масштабирование ширины окна приведет к изменению высоты элемента.
Универсальный размер шрифта
Если необходимо обеспечить приятное оформление, необходимо убедится в том, что шрифты отображаются в подходящих размерах независимо от используемого устройства. Особенно заголовки нуждаются в изменении, для того, чтобы избежать плохого их отображения. Использование viewport значений определяет шрифт относительно ширины окна браузера.
h1 { font-size: 10vw; }
В примере определен размер шрифта как 10% от ширины окна. Благодаря «vw» размер шрифта для «h1» будет всегда подстраиваться относительно окна браузера.
Поддержка браузеров
Самым главным момент является то, что viewport поддерживаются всему популярными браузерами. Даже Internet Explorer может корректно отображать элементы, по крайней мере, начиная с версии 10, Firefox добавил поддержку с версии 19, Chrome с версии 20.
