CSS – язык стилей. Он используется для верстки веб-страниц и не только. Обычно применяется в сочетании с HTML. Это мощный инструмент программиста и верстальщика.
Язык стилей стремительно развивается. С каждым его обновлением разработчикам приходится знакомиться с новыми компонентами. Несколько лет назад CSS получил различные единицы измерения, связанные с областью просмотра на экране. В результате можно динамично и достаточно гибко оценивать размер компонентов на дисплее, не прибегая к дополнительному использованию JavaScript.
Далее предстоит познакомиться с существующими единицами измерения CSS более подробно. Необходимо не только изучить доступные варианты, но и способы их применения. Также предстоит ознакомиться с решением самых распространенных проблем в процессе верстки.
Пиксели
Пиксели (или px) – базовая абсолютная и окончательная единица измерения в CSS. Количество пикселей будет задаваться в настройках разрешения экрана. Один px – это и есть один пиксель на экране. Значения, указанные при верстке в px, будут пересчитаны интернет-обозревателем в пиксели.
CSS допускает использование не только целых чисел в качестве единиц измерения в пикселях, но и дробных. Браузеры тоже пользуются дробями для внутренних расчетов. При окончательном отображении дробные пиксели будут округляться до целых значений.
У этой единицы измерения есть свои преимущества и недостатки. К плюсам относят четкость и понятность. К недостаткам – то, что некоторые другие единицы более «мощные» и относительные, позволяющие устанавливать соотношения между разными размерами.
Шрифт: em
1em – это нынешний размер шрифта. Пропорции от него можно брать совершенно разные – как целые, так и дробные.
Размер в em – относительная единица. Этот параметр будет определяться в зависимости от текущего контента. Значение em высчитывается относительно нынешнего используемого шрифта.
«Габариты» уменьшаются и увеличиваются в em вместе со шрифтом. Стоит запомнить – размер шрифта обычно определяется в «родителе». Он может быть изменен всего в одном месте, чтобы корректировки вступили в силу относительно всего документа.
Прочие популярные единицы: таблица для верстки
В CSS поддерживаются самые разные единицы измерения. Чаще всего можно встретиться с единицами для:
- углов – deg и turn;
- времени – ms и s;
- плотности экрана – dpi и dppx.
Допускаются измерения в процентах. Этот прием часто встречается в верстке не только простых веб-сервисов, но и достаточно сложных.
Ниже представлена таблица, которая в общих чертах объяснит основные единицы измерения в CSS:
Это абсолютные показатели. Они будут относительными друг для друга. Данные единицы привязаны к определенным величинам.
В случае с печатью сантиметры, дюймы и миллиметры должны быть равны своим «обычным» значениям. Для дисплеев ситуация будет выглядеть иначе:
Теперь можно более подробно рассмотреть Viewport-единицы. С их помощью получится гибко и быстро верстать страницы.
О Viewport
Спецификация CSS указывает на то, что процентные viewport – это относительные единицы по отношению к размеру изначального блока контейнера на экране. Контейнер представляет собой корневой компонент страницы.
К рассматриваемым измерениям можно отнести:
- vmin;
- vmax;
- vw;
- vh.
Далее каждый предложенный компонент будет рассмотрен более подробно. Эта информация пригодится каждому верстальщику, который планирует эффективно и гибко располагать элементы веб-проекта на дисплее.
Ширина области просмотра
Первый вариант измерения – это по ширине области просмотра. Соответствующий компонент называется vw. Он представляет собой процент от ширины корневого компонента. 1vw – это 1 % от ширины зоны просмотра.
Выглядит это так:
Пусть будет дан элемент с такими CSS-показателями:
Если ширина области просмотра достигает 500px, 50vw рассчитывается по следующему принципу:
Данный принцип расчета актуален и для других показателей.
Высота области просмотра
Для определения высоты области просмотра используется vh. Этот показатель представляет собой процент от высоты корневого компонента. 1vh равняется 1% высоты области просмотра:
Пусть будет дан компонент со следующей CSS-версткой:
Если высота области просмотра равняется 290 пикселей, 70vh рассчитывается по формуле:
С основными компонентами для верстки области просмотра уже удалось познакомиться. Теперь можно перейти к другим единицам, которые пригодятся каждому верстальщику при работе с CSS.
Vmin
Vmin – единица, которая указывает на минимум ширины или высоты имеющегося viewport. Если ширина больше высоты, значение рассматриваемого параметра базируется на высоте.
Чтобы лучше понимать принцип работы, рекомендуется изучить наглядный пример. Пусть будет дан смартфон. У него на дисплее устанавливается альбомная ориентация. Для элемента создается Vmin.
В соответствующем случае значение рассчитывается, опираясь на высоту области просмотра. Это вызвано тем, что данное значение оказывается меньше ширины.
А вот основная схема расчета Vmin. Опираясь на нее, пользователь сможет быстро понять, как работает система:
В рассматриваемом случае итоговый результат будет подсчитан при помощи следующей формулы:
padding-top = (10% of height) = 10% * 164 = 16.4px padding-bottom = (10% of height) = 10% * 164 = 16.4px
Теперь понятно, как подсчитывается Vmin в той или иной ситуации. Но это не исчерпывающий параметр, который пригодится верстальщику. Есть и другие измерения, которые помогут грамотно отобразить информацию и понять, как элементы будут выглядеть в том или ином случае.
Vmax
Vmax является полной противоположностью Vmin. При работе с этим компонентом предстоит производить расчеты, опираясь на максимальную ширину, а также имеющуюся предельную высоту.
Для наглядности рекомендуется рассмотреть следующий пример:
Вот схема расчета соответствующей характеристики:
Из предложенного алгоритма следует, что итоговый результат рассчитывается по формуле:
padding-top = (10% of width) = 10% * 350 = 35px padding-bottom = (10% of width) = 10% * 350 = px
Стоит обратить внимание на то, что измерения, связанные с областью просмотра, будут напрямую зависеть от корневого компонента на веб-странице. Проценты зависят от контейнера, в котором они располагаются. Все это приводит к тому, что для каждого способа измерения существуют свои ключевые области применения.
Как пользоваться единицами измерения, связанными с областью просмотра
Единицы измерения, связанные с областью просмотра при создании веб-страниц, а также верстке, имеют достаточно широкое применение. Чтобы лучше понимать принципы их работы, рекомендуется изучить различные примеры. Далее будут приведены самые распространенные и полезные методы применения изучаемых параметров.
Шрифт
Единицы, связанные с областью просмотра, отлично подходят для того, чтобы внедрять их в адаптивную типографику. Примером служит использование следующего кода для формирования заголовка имеющейся статьи:
Front-size заголовка увеличивается или уменьшается в зависимости от имеющейся области просмотра. Данный пример – это словно задавать размер шрифта 5% от ширины области просмотра. Обычно подобный прием не нуждается в постоянном тестировании. Он является весьма предсказуемым.
Предложенный размер шрифта стал очень маленьким для мобильных устройств, что негативно сказывается на удобстве его применения, а также доступности информации. Минимальный размер шрифта на смартфоне/планшете не должен выходить за пределы 14 пикселей. Если речь идет о GIF, шрифт уменьшается до 10 пикселей.
Решить подобную проблему можно, если задать для заголовка минимальный шрифтовой параметр. Делается это через CSS calc:
Данная функция будет иметь стандартное (базовое) значение 14 пикселей. К нему добавляются 2vw. Теперь итоговый шрифт на экране не будет слишком мелким.
Еще один момент, который необходимо принять во внимание, – шрифтовые параметры на больших экранах. Шрифт на дисплее 27 дюймов будет увеличен до 95 пикселей. Это очень много. Для предотвращения ситуации требуется:
- Воспользоваться медиа-запросами.
- Внести изменения font-size в некоторых контрольных точках.
Вот наглядный пример реализации приема:
При помощи сброса font-size можно убедиться в том, что «габариты» не окажутся в конечном итоге слишком крупными. Иногда требуется добавить несколько медиа-запросов: все зависит от конкретного контекста и проекта.
Разделы на весь экран
Рассматривая практическое применение vh и vw, можно попробовать реализовать их при создании разделов «на весь экран». В этом случае охват раздела составляет 100 % от имеющейся области просмотра. Такую ситуацию называют «полноэкранными разделами». Для реализации приема требуется задействовать высоту окна просмотра:
При помощи указания height 100vh можно гарантировать то, что высота используемого раздела окажется 100 % от заданной области просмотра. Также в заданном примере имеются flex-box, которые центрируют контент по вертикали и горизонтали.
Адаптивные компоненты
Рассматриваемые единицы могут пригодиться при создании адаптивных элементов на имеющейся веб-странице. Примером послужит портфолио для демонстрации адаптивных дизайнерских работ. Пусть будут даны три разных устройства:
- портативное;
- планшет;
- смартфон.
Каждый макет будет иметь изображение. Цель – создание 100 % адаптивности в CSS.
При помощи CSS-сетки и единиц измерения, связанных со сферой просмотра, можно добиться желаемой цели. Элементы станут не только адаптивными, но и динамичными:
Необходимо обратить внимание, что в grid-свойствах применяется рассматриваемый тип единиц измерения. Они также задействованы для border, border-radius и других параметров. Вот так будет выглядеть полный код верстки:
Это не исчерпывающие варианты применения изучаемых параметров. Есть и другие, более интересные и полезные.
Выходы за пределы контейнеров
А вот еще один интересный вариант применения изучаемых параметров. Он больше всего подходит при разработке и верстке редакционных макетов. Дочерний элемент, который занимает 100 % пространства, даже если ширина его родителя ограничена.
Чтобы получить аналогичный эффект, можно использовать рассматриваемые единицы измерения. А еще – некоторые свойства позиционирования. Вот так будет выглядеть код в CSS:
Теперь можно изучить ситуацию более подробно на нескольких примерах. Они помогут выяснить, как все функционирует.
Добавление width
Добавление width: 100vw – это один из самых важных шагов. С его помощью получится задать ширину изображения, которая составит 100 % от «зоны видимости».
Выше – наглядный пример того, как ситуация будет выглядеть непосредственно на дисплее.
Добавление margin-left
Использование margin-left -50vw помогает отцентрировать картинку на экране. Соответствующая операция возможна, если задать для указанного свойства отрицательное поле с половиной ширины «зоны видимости».
Выше – пример отображения на дисплее.
Шапка сайта
Шапка – раздел, который представляет собой своеобразное введение для веб-портала. Он часто включает в себя:
- заголовок;
- описание;
- отступы для верхнего и нижнего краев.
Вот пример реализации в CSS:
Отступы по вертикали на мобильном устройстве окажутся слишком маленькими. На больших дисплеях соответствующие элементы являются слишком крупными. Чтобы исправить ситуацию, необходимо использовать рассматриваемые измерения:
В заданном примере используется vh перед заголовком страницы и под ним.
Компоненты в сетке
А вот еще один метод применения динамического интервала. Речь идет о размещении элементов в сетке. Ими могут быть различные составляющие:
- раздел услуг;
- сетка статей;
- прочие элементы.
Ниже – пример, который актуален для сетки статей:
Используя внутри окна просмотра grid-gap, можно получить необходимый результат. Здесь необходимо обратить внимание на то, что в коде используется функция CSS calc:
Целью применения данной команды является получение базового вертикального и горизонтального зазора.
Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus. В частности, вас может заинтересовать курс, посвященный FullStack-разработке, первой ступенью которого является изучение HTML/CSS.
