—»     —»   CSS3: Viewport Units – новые единицы измерения для адаптивного дизайна
  Раздел: CSS/Style Sheets   Комментариев: 1  

CSS3: Viewport Units – новые единицы измерения для адаптивного дизайна



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

CSS3: Viewport Units – новые единицы измерения для адаптивного дизайна

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

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

Единицы изменения 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.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 4974   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 15 августа 2014 @ 14:13
Написал: lif — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
С мобильными браузерами вопрос. А верстать под них на этой системе исчисления самое то.
Там еще есть vm - меньшая ширина окна.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2017    »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031