Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-03-10

1 <ul><li><a>Пиксели</a></li>

2 <li><a>Шрифт: em</a></li>

3 <li><a>Прочие популярные единицы: таблица для верстки</a></li>

4 <li><a>О Viewport</a></li>

5 <li><a>Ширина области просмотра</a></li>

6 <li><a>Высота области просмотра</a></li>

7 <li><a>Vmin</a></li>

8 <li><a>Vmax</a></li>

9 <li><a>Как пользоваться единицами измерения, связанными с областью просмотра</a><ul><li><a>Шрифт</a></li>

10 <li><a>Разделы на весь экран</a></li>

11 <li><a>Адаптивные компоненты</a></li>

12 <li><a>Выходы за пределы контейнеров</a><ul><li><a>Добавление width</a></li>

13 <li><a>Добавление margin-left</a></li>

14 </ul></li>

15 <li><a>Шапка сайта</a></li>

16 <li><a>Компоненты в сетке</a></li>

17 </ul></li>

18 </ul><p>CSS - язык стилей. Он используется для верстки веб-страниц и не только. Обычно применяется в сочетании с HTML. Это мощный инструмент программиста и верстальщика.</p>

19 <p>Язык стилей стремительно развивается. С каждым его обновлением разработчикам приходится знакомиться с новыми компонентами. Несколько лет назад CSS получил различные единицы измерения, связанные с областью просмотра на экране. В результате можно динамично и достаточно гибко оценивать размер компонентов на дисплее, не прибегая к дополнительному использованию JavaScript.</p>

20 <p>Далее предстоит познакомиться с существующими единицами измерения CSS более подробно. Необходимо не только изучить доступные варианты, но и способы их применения. Также предстоит ознакомиться с решением самых распространенных проблем в процессе верстки.</p>

21 <h2>Пиксели</h2>

22 <p>Пиксели (или px) - базовая абсолютная и окончательная единица измерения в CSS. Количество пикселей будет задаваться в настройках разрешения экрана. Один px - это и есть один пиксель на экране. Значения, указанные при верстке в px, будут пересчитаны интернет-обозревателем в пиксели.</p>

23 <p>CSS допускает использование не только целых чисел в качестве единиц измерения в пикселях, но и дробных. Браузеры тоже пользуются дробями для внутренних расчетов. При окончательном отображении дробные пиксели будут округляться до целых значений.</p>

24 <p>У этой единицы измерения есть свои преимущества и недостатки. К плюсам относят четкость и понятность. К недостаткам - то, что некоторые другие единицы более "мощные" и относительные, позволяющие устанавливать соотношения между разными размерами.</p>

25 <h2>Шрифт: em</h2>

26 <p>1em - это нынешний размер шрифта. Пропорции от него можно брать совершенно разные - как целые, так и дробные.</p>

27 <p>Размер в em - относительная единица. Этот параметр будет определяться в зависимости от текущего контента. Значение em высчитывается относительно нынешнего используемого шрифта.</p>

28 <p>"Габариты" уменьшаются и увеличиваются в em вместе со шрифтом. Стоит запомнить - размер шрифта обычно определяется в "родителе". Он может быть изменен всего в одном месте, чтобы корректировки вступили в силу относительно всего документа.</p>

29 <h2>Прочие популярные единицы: таблица для верстки</h2>

30 <p>В CSS поддерживаются самые разные единицы измерения. Чаще всего можно встретиться с единицами для:</p>

31 <ul><li>углов - deg и turn;</li>

32 <li>времени - ms и s;</li>

33 <li>плотности экрана - dpi и dppx.</li>

34 </ul><p>Допускаются измерения в процентах. Этот прием часто встречается в верстке не только простых веб-сервисов, но и достаточно сложных.</p>

35 <p>Ниже представлена таблица, которая в общих чертах объяснит основные единицы измерения в CSS:</p>

36 <p>Это абсолютные показатели. Они будут относительными друг для друга. Данные единицы привязаны к определенным величинам.</p>

37 <p>В случае с печатью сантиметры, дюймы и миллиметры должны быть равны своим "обычным" значениям. Для дисплеев ситуация будет выглядеть иначе:</p>

38 <p>Теперь можно более подробно рассмотреть Viewport-единицы. С их помощью получится гибко и быстро верстать страницы.</p>

39 <h2>О Viewport</h2>

40 <p>Спецификация CSS указывает на то, что процентные viewport - это относительные единицы по отношению к размеру изначального блока контейнера на экране. Контейнер представляет собой корневой компонент страницы.</p>

41 <p> К рассматриваемым измерениям можно отнести:</p>

42 <ul><li>vmin;</li>

43 <li>vmax;</li>

44 <li>vw;</li>

45 <li>vh.</li>

46 </ul><p>Далее каждый предложенный компонент будет рассмотрен более подробно. Эта информация пригодится каждому верстальщику, который планирует эффективно и гибко располагать элементы веб-проекта на дисплее.</p>

47 <h2>Ширина области просмотра</h2>

48 <p>Первый вариант измерения - это по ширине области просмотра. Соответствующий компонент называется vw. Он представляет собой процент от ширины корневого компонента. 1vw - это 1 % от ширины зоны просмотра.</p>

49 <p>Выглядит это так:</p>

50 <p>Пусть будет дан элемент с такими CSS-показателями:</p>

51 <p>Если ширина области просмотра достигает 500px, 50vw рассчитывается по следующему принципу:</p>

52 <p>Данный принцип расчета актуален и для других показателей.</p>

53 <h2>Высота области просмотра</h2>

54 <p>Для определения высоты области просмотра используется vh. Этот показатель представляет собой процент от высоты корневого компонента. 1vh равняется 1% высоты области просмотра:</p>

55 <p>Пусть будет дан компонент со следующей CSS-версткой:</p>

56 <p>Если высота области просмотра равняется 290 пикселей, 70vh рассчитывается по формуле:</p>

57 <p>С основными компонентами для верстки области просмотра уже удалось познакомиться. Теперь можно перейти к другим единицам, которые пригодятся каждому верстальщику при работе с CSS.</p>

58 <h2>Vmin</h2>

59 <p>Vmin - единица, которая указывает на минимум ширины или высоты имеющегося viewport. Если ширина больше высоты, значение рассматриваемого параметра базируется на высоте.</p>

60 <p>Чтобы лучше понимать принцип работы, рекомендуется изучить наглядный пример. Пусть будет дан смартфон. У него на дисплее устанавливается альбомная ориентация. Для элемента создается Vmin.</p>

61 <p>В соответствующем случае значение рассчитывается, опираясь на высоту области просмотра. Это вызвано тем, что данное значение оказывается меньше ширины.</p>

62 <p>А вот основная схема расчета Vmin. Опираясь на нее, пользователь сможет быстро понять, как работает система:</p>

63 <p>В рассматриваемом случае итоговый результат будет подсчитан при помощи следующей формулы:</p>

64 <p>padding-top = (10% of height) = 10% * 164 = 16.4px padding-bottom = (10% of height) = 10% * 164 = 16.4px</p>

65 <p>Теперь понятно, как подсчитывается Vmin в той или иной ситуации. Но это не исчерпывающий параметр, который пригодится верстальщику. Есть и другие измерения, которые помогут грамотно отобразить информацию и понять, как элементы будут выглядеть в том или ином случае.</p>

66 <h2>Vmax</h2>

67 <p>Vmax является полной противоположностью Vmin. При работе с этим компонентом предстоит производить расчеты, опираясь на максимальную ширину, а также имеющуюся предельную высоту.</p>

68 <p>Для наглядности рекомендуется рассмотреть следующий пример:</p>

69 <p>Вот схема расчета соответствующей характеристики:</p>

70 <p>Из предложенного алгоритма следует, что итоговый результат рассчитывается по формуле:</p>

71 <p>padding-top = (10% of width) = 10% * 350 = 35px padding-bottom = (10% of width) = 10% * 350 = px</p>

72 <p>Стоит обратить внимание на то, что измерения, связанные с областью просмотра, будут напрямую зависеть от корневого компонента на веб-странице. Проценты зависят от контейнера, в котором они располагаются. Все это приводит к тому, что для каждого способа измерения существуют свои ключевые области применения.</p>

73 <h2>Как пользоваться единицами измерения, связанными с областью просмотра</h2>

74 <p>Единицы измерения, связанные с областью просмотра при создании веб-страниц, а также верстке, имеют достаточно широкое применение. Чтобы лучше понимать принципы их работы, рекомендуется изучить различные примеры. Далее будут приведены самые распространенные и полезные методы применения изучаемых параметров.</p>

75 <h3>Шрифт</h3>

76 <p>Единицы, связанные с областью просмотра, отлично подходят для того, чтобы внедрять их в адаптивную типографику. Примером служит использование следующего кода для формирования заголовка имеющейся статьи:</p>

77 <p>Front-size заголовка увеличивается или уменьшается в зависимости от имеющейся области просмотра. Данный пример - это словно задавать размер шрифта 5% от ширины области просмотра. Обычно подобный прием не нуждается в постоянном тестировании. Он является весьма предсказуемым.</p>

78 <p>Предложенный размер шрифта стал очень маленьким для мобильных устройств, что негативно сказывается на удобстве его применения, а также доступности информации. Минимальный размер шрифта на смартфоне/планшете не должен выходить за пределы 14 пикселей. Если речь идет о GIF, шрифт уменьшается до 10 пикселей.</p>

79 <p>Решить подобную проблему можно, если задать для заголовка минимальный шрифтовой параметр. Делается это через CSS calc:</p>

80 <p>Данная функция будет иметь стандартное (базовое) значение 14 пикселей. К нему добавляются 2vw. Теперь итоговый шрифт на экране не будет слишком мелким.</p>

81 <p>Еще один момент, который необходимо принять во внимание, - шрифтовые параметры на больших экранах. Шрифт на дисплее 27 дюймов будет увеличен до 95 пикселей. Это очень много. Для предотвращения ситуации требуется:</p>

82 <ol><li>Воспользоваться медиа-запросами.</li>

83 <li>Внести изменения font-size в некоторых контрольных точках.</li>

84 </ol><p>Вот наглядный пример реализации приема:</p>

85 <p>При помощи сброса font-size можно убедиться в том, что "габариты" не окажутся в конечном итоге слишком крупными. Иногда требуется добавить несколько медиа-запросов: все зависит от конкретного контекста и проекта.</p>

86 <h3>Разделы на весь экран</h3>

87 <p>Рассматривая практическое применение vh и vw, можно попробовать реализовать их при создании разделов "на весь экран". В этом случае охват раздела составляет 100 % от имеющейся области просмотра. Такую ситуацию называют "полноэкранными разделами". Для реализации приема требуется задействовать высоту окна просмотра:</p>

88 <p>При помощи указания height 100vh можно гарантировать то, что высота используемого раздела окажется 100 % от заданной области просмотра. Также в заданном примере имеются flex-box, которые центрируют контент по вертикали и горизонтали.</p>

89 <h3>Адаптивные компоненты</h3>

90 <p>Рассматриваемые единицы могут пригодиться при создании адаптивных элементов на имеющейся веб-странице. Примером послужит портфолио для демонстрации адаптивных дизайнерских работ. Пусть будут даны три разных устройства:</p>

91 <ul><li>портативное;</li>

92 <li>планшет;</li>

93 <li>смартфон.</li>

94 </ul><p>Каждый макет будет иметь изображение. Цель - создание 100 % адаптивности в CSS.</p>

95 <p>При помощи CSS-сетки и единиц измерения, связанных со сферой просмотра, можно добиться желаемой цели. Элементы станут не только адаптивными, но и динамичными:</p>

96 <p>Необходимо обратить внимание, что в grid-свойствах применяется рассматриваемый тип единиц измерения. Они также задействованы для border, border-radius и других параметров. Вот так будет выглядеть полный код верстки:</p>

97 <p>Это не исчерпывающие варианты применения изучаемых параметров. Есть и другие, более интересные и полезные.</p>

98 <h3>Выходы за пределы контейнеров</h3>

99 <p>А вот еще один интересный вариант применения изучаемых параметров. Он больше всего подходит при разработке и верстке редакционных макетов. Дочерний элемент, который занимает 100 % пространства, даже если ширина его родителя ограничена.</p>

100 <p>Чтобы получить аналогичный эффект, можно использовать рассматриваемые единицы измерения. А еще - некоторые свойства позиционирования. Вот так будет выглядеть код в CSS:</p>

101 <p>Теперь можно изучить ситуацию более подробно на нескольких примерах. Они помогут выяснить, как все функционирует.</p>

102 <h4><em>Добавление width</em></h4>

103 <p>Добавление width: 100vw - это один из самых важных шагов. С его помощью получится задать ширину изображения, которая составит 100 % от "зоны видимости".</p>

104 <p>Выше - наглядный пример того, как ситуация будет выглядеть непосредственно на дисплее.</p>

105 <h4><em>Добавление margin-left</em></h4>

106 <p>Использование margin-left -50vw помогает отцентрировать картинку на экране. Соответствующая операция возможна, если задать для указанного свойства отрицательное поле с половиной ширины "зоны видимости".</p>

107 <p>Выше - пример отображения на дисплее.</p>

108 <h3>Шапка сайта</h3>

109 - <p>Шапка - раздел, который представляет собой своеобразное введение для веб-портала. Он часто включает в себя:</p>

109 + <p>Шапка - раздел, который представляет со��ой своеобразное введение для веб-портала. Он часто включает в себя:</p>

110 <ul><li>заголовок;</li>

111 <li>описание;</li>

112 <li>отступы для верхнего и нижнего краев.</li>

113 </ul><p>Вот пример реализации в CSS:</p>

114 <p>Отступы по вертикали на мобильном устройстве окажутся слишком маленькими. На больших дисплеях соответствующие элементы являются слишком крупными. Чтобы исправить ситуацию, необходимо использовать рассматриваемые измерения:</p>

115 <p>В заданном примере используется vh перед заголовком страницы и под ним.</p>

116 <h3>Компоненты в сетке</h3>

117 <p>А вот еще один метод применения динамического интервала. Речь идет о размещении элементов в сетке. Ими могут быть различные составляющие:</p>

118 <ul><li>раздел услуг;</li>

119 <li>сетка статей;</li>

120 <li>прочие элементы.</li>

121 </ul><p>Ниже - пример, который актуален для сетки статей:</p>

122 <p>Используя внутри окна просмотра grid-gap, можно получить необходимый результат. Здесь необходимо обратить внимание на то, что в коде используется функция CSS calc:</p>

123 <p>Целью применения данной команды является получение базового вертикального и горизонтального зазора.</p>

124 <p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в <a>Otus</a>. В частности, вас может заинтересовать<a>курс, посвященный FullStack-разработке</a>, первой ступенью которого является изучение HTML/CSS</em>.</p>

125