Единицы измерения css, размер шрифта

ex и ch

Единицы и , по аналогии с и , соотносятся с текущим шрифтом и размером шрифта. Но, в отличие от и , они также соотносятся  c .

или character является продвинутой единицей измерения ширины от нуля, . Наиболее интересные обсуждения того, что это может значить, можно найти в блоге Эрика Мейерса. Вкратце, если мы возьмем моноширинный шрифт, контейнер с шириной из букв, тогда, например, всегда будет содержать выражение из 40 единиц этого конкретного шрифта. Когда стандартным использованием этого правила является пример шрифта Брайля, возможности творческого подхода существенно расширяют его функционал.

обозначается как «x-высота текущего шрифта ИЛИ половина «. выбранного шрифта называется высота буквы x нижнего регистра этого шрифта. Часто эта высота оказывается срединной точки всей высоты шрифта.

X-высота; высота буквы x нижнего регистра (читайте больше про структуру веб типографики)

Для этой единицы измерения существует множество вариантов использования, большинство из них являются небольшими дополнениями к основной типографике. Например, элемент , который обозначает надстрочные символы, может быть приподнят относительно своей позиции, если ему задать position: relative и значение свойства bottom 1ex. Таким же образом вы можете опустить подстрочные буквы еще ниже. Стандартные настройки браузера использует свои правила надстрочных и подстрочных символов. Но если вам нужна более тонкая настройка, вы можете сделать ее следующим образом:

Могу ли я это использовать?

Единица существует примерно , а вот для такой поддержки вы не найдете. Для ознакомления со спецификацией по поддержке свойств, ознакомьтесь со значениями и единицами CSS в блоге Эрика Мейерса.

Font Sizing with Rem Units

One of the pioneers of using rem units for font sizing is Jonathan Snook with his Font sizing with REM article, back in May, 2011. Like many other CSS developers, he had to face the problems that em units bring in complex layouts.

At that time, older versions of IE still had large market shares and they were unable to zoom text that was sized with pixels. However, as we saw earlier, it is very easy to lose track of nesting and get unexpected results with em units.

The main issue with using rem for font sizing is that the values are somewhat difficult to use. Let’s see an example of some common font sizes expressed in rem units, assuming, of course, that the base size is 16px:

• 10px = 0.625rem
• 12px = 0.75rem
• 14px = 0.875rem
• 16px = 1rem (base)
• 18px = 1.125rem
• 20px = 1.25rem
• 24px = 1.5rem
• 30px = 1.875rem
• 32px = 2rem

As we can see, these values are not very convenient for making calculations. For this reason, Snook used a trick called “62.5%“. It was not a new discovery, by any means, as it was already used with em units:

As rem units are relative to the root element, Snook’s variant of the solution becomes:

One also had to take into account the other browsers that didn’t support rem. Thus the code from above would have actually been written this way:

While this solution seems to be close to the status of a “golden rule”, there are people who advise against using it blindingly. Harry Roberts writes his own take on the use of rem units. In his opinion, while the 62.5% solution makes calculation easier (as the font sizes in are 10 times their rem values), it ends up forcing developers to explicitly rewrite all the font sizes in their website.

A third view comes from Chris Coyier of CSS-Tricks. His solution makes use of all three units we encountered so far. He keeps the root size defined in , modules defined with rem units, and elements inside modules sized with em. This approach makes easier to manipulate global size, which scales the type in the modules, while the module content is scaled based on the module font size itself. Louis Lazaris discussed that latter concept in The Power of em Units in CSS.

In the example below you can see how Chris’s approach would look:

See the Pen One Method for Using ems and rems in CSS by SitePoint (@SitePoint) on CodePen.

In practice, there are major frameworks such as Bootstrap 4 and the guidelines that use rem units for sizing text content.

A special mention goes to , a very popular collection of React components. Not only are they sizing text the same way, but also offer a mechanism to implement the “10px simplification” we mentioned above.

Another recent project, Every Layout, combines em and rem units in a very inspired way. It comes closest to Chris Coyier’s model outline earlier and it uses em units to emphasize inline elements like SVG icons, spans or other similar elements.

As you can see, there is no “silver bullet” solution. The combinations possible are limited only by the imagination of the developers.

Em

Давайте снова вернемся к нашему первому шаблону и поговорим про такую единицу измерения, как em. Выясним, как будет вести себя данное значение, если вместо пикселей мы будем указывать относительную единицу em. Для этого создадим пример, в котором внутри будет содержаться два текста. Один будет обернут в , другой — во вложенном с классом .

<div class="box">
   Lorem Ipsum
   <div class="post">Lorem Ipsum</div>
</div>

По умолчанию body равен . Далее стилизуем :

body {
   font-size: 16px;
}
.post {
   font-size: 1.2em;
}

Чтобы вычислить значение , вы можете взять в руки калькулятор, либо (если вы используете систему macOS) набрать комбинацию CMD + пробел, открыть окно ввода для вычислений. Итак, нам необходимо умножить 16 на 1.2. Итого у нас получится 19.2. Это значит, что браузер выводит текст , как 19.2px. Такую относительную единицу измерения удобнее использовать, если вам нужно изменить значение в body, например, поставить значение 30px. И тогда значение в будет вычисляться автоматически, то есть умножаться на 1.2. При этом если бы вы работали с пикселями и написали бы в 30px, а в body в дальнейшем написали бы 50px, то ничего бы у вас не изменилось в значении и соответственно вам бы пришлось вводить все это вручную.

Ознакомиться подробнее с HTML и CSS можно тут:

Давайте снова вернемся к интерактивной шпаргалке. Мы можем проверить, какие единицы измерения работают в связке с body. Например, если добавить в блоке CSS,

body {
   font-size: 30px;
}

то мы сразу увидим, какие значения меняются. Например, пиксели не изменились совершенно, но при этом у нас изменился блок «проценты» и «em».
Единица измерения rem, не зависит от body, и это первое ее отличие от em.

Вложенность
Итак, пока мы полностью не перешли к теме rem, давайте рассмотрим еще один пример связанный со вложенностями. Самый удобный пример, связанный с вложенностями — это списки, поэтому давайте будем работать с ними.

<ul>
   <li> Первый уровень
      <ul>
         <li> Второй уровень
            <ul>
               <li> Третий уровень
                  <ul>
                     <li>Четвертый уровень</li>
                  </ul>
               </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

Давайте для тега , зададим значение 0.8em:

ul {
   font-size: 0.8em; 
}

Первая проблема, которую мы видим, — каждая последующая вложенность становится меньше и кратна значению родителя. При этом, если мы используем значение больше единицы, например 1.8em, то каждая последующая вложенность увеличивается относительно предыдущего уровня. Эту проблему можно решить, но этот метод не совершенен:

ul {
   font-size: 0.8em; 
}

ul ul {
   font-size: 1em; 
}

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

Единицы изменения viewport (окно просмотра)

CSS

.element-one {
  font-size: 100vh;
}

.element-two {
  font-size: 100vw;
}
.

Viewport-единицы, такие как vw и vh, позволяют устанавливать размер шрифта относительно длины или ширины окна просмотра:

• 1vw = 1% от ширины окна просмотра;
• 1vh = 1% от высоты окна просмотра.

То есть, если мы посмотрим на следующий пример:

CSS

.element {
  font-size: 100vh;
}
}

то увидим, что размер текста CSS всегда должен находиться на отметке в 100% ширины окна просмотра (50vh будет означать 50%, 15vh — 15% и так далее). В приведенном ниже демо попробуйте изменить высоту, и посмотрите, как растягивается шрифт:

vw-единицы отличаются тем, что позволяют указывать высоту символов, руководствуясь шириной окна просмотра. В приведенном ниже демо вам нужно будет изменить ширину окна браузера, чтобы увидеть изменения:

Эти единицы измерения поддерживаются следующими браузерами:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
31+	7+	31+	27+	9+	4.4+	7.1+

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

CSS Свойства

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerighttab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Единица измерения em

CSS

.element {
  font-size: 2em;
}

Единица измерения em является относительной, и вычисляется в зависимости от CSS размера текста в родительском элементе. Это означает, что дочерние элементы всегда зависят от родительских. Например:

HTML

<div class="container">
  <h2>Заголовок</h2>
  <p>Какой-нибудь текст</p>
</div>

CSS

.container {
  font-size: 16px;
}

p {
  font-size: 1em;
}

h2 {
  font-size: 2em;
}

В приведенном выше примере у абзаца будет установлено значение font-size 16px, так как 1 x 16 = 16px, а в качестве размера текста HTML CSS заголовка будет использоваться 32px, так как 2 x 16 = 32px. Есть некоторое преимущество в том, чтобы указывать размер, ориентируясь на родительский элемент. Так мы можем оборачивать элементы в контейнеры и быть уверенными в том, что все дочерние элементы всегда будут относительны друг другу:

Простой пример адаптивной вёрстки

Полный пример на Codepen

Ниже распишу только ключевые моменты адаптивности

Начальные стили десктоп вёрстки при ширине 1200px

При ширине 992px карточки немного сужаются, но все еще отображаются корректно, поэтому пока без изменений

При ширине 768px карточки становятся очень узкими, поэтому переназначаем свойство карточки , чтобы карточки отображались по две в ряд

При ширине 576px карточки также становятся узкими, поэтому снова переназначаем свойство карточки чтобы карточки отображались по одной

При ширине 320px карточкам не хватает места, и они также выглядят довольно узкими, поэтому уменьшим внутренние отступы контейнера

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

Абсолютные ключи и значения

CSS

.element {
  font-size: small;
}
}

Свойство, которое устанавливает размер текста CSS, принимает следующие ключевые слова:

• xx-small;
• x-small;
• small;
• medium;
• large;
• x-large;
• xx-large.

Эти обозначения определяют относительный размер текста CSS, вычисляемый браузером. Но вы также можете использовать два ключевых значения, которые вычисляются относительно размера шрифта, указанного в родительском элементе.

Среди других абсолютных значений можно выделить mm (миллиметры), cm (сантиметры), in (дюймы), pt (пункты) и pc (пики). Один pt равен 1/72 дюйма, или одна пика равна 12 пунктам. Обычно эти единицы используются в печатных документах.

Кожа, металл, карбон

Если у некоторых брендов наличие кусочка кожи или алюминия в дизайне гаджета является признаком роскоши с соответствующим ценником, то наушники Bowers & Wilkins уверенно тянут на премиальный сегмент, хоть и стоят 26 990 рублей.

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

Оголовье тоже обтянуто тканью с мягкой набивкой. На голове наушники сидят удобно и не давят. Возможно, не последнюю роль в этом играет как раз карбон, который довольно лёгкий материал. Наушники весят всего 310 гр.

Сочетание пассивного и активного шумодава понравится часто путешествующим людям. Амбушюры прилегают к ушам достаточно плотно, чтобы отсечь большинство посторонних шумов, а если этого не хватает, например, в самолёте, то у наушников есть продвинутая система активного шумодава, которая отсекает лишние частоты, практически не искажая звучание музыки.

Кстати, в PX7 Carbon Edition шумодав умный. Функция сама анализирует окружающий шумовой фон и автоматически выбирает нужный тип и уровень шумоподавления.

А если нужно услышать собеседника, или просто оценить обстановку, достаточно активировать функцию Ambient-Pass-Through, которая позволяет слышать определенные внешние звуки без снятия наушников, или просто отодвинуть одну чашку от уха, чтобы музыка автоматически приостановилась.

К наушникам можно подключить комплектный аудиокабель с разъёмами mini-jack на 3,5 мм и продолжать слушать музыку, даже если PX7 полностью разрядились.

На чашках расположены элементы управления: кнопки воспроизведения, перемотки треков и управления громкостью. Есть отдельная качелька для включения наушников, она же активирует Bluetooth для спаривания PX7 с гаджетом.

Кнопки нажимаются с приятным кликом, легко нащупываются пальцем. Привыкаешь к управлению буквально за несколько минут.

Наушники заряжаются через USB-C, причём за 15 минут питания от розетки можно получить до 5-ти часов автономной работы. Всего же наушники проработают до 30 часов на одном заряде с включенным шумодавом.

Use em or px for font sizes

CSS inherited the units (point) and (pica) from typography. Printers have traditionally
used those and similar units in preference to or
. In CSS there is no reason to use , use whichever unit you prefer. But there is a good
reason to use neither nor any other absolute
unit and only use and .

Here are a few lines of different thickness. Some or all of
them may look sharp, but at least the 1px and 2px lines should be
sharp and visible:

0.5pt,
1px,
1pt,
1.5px, 2px

If the first four lines all look the same (or if the 0.5pt line
is missing), you are probably looking at a computer monitor that
cannot display dots smaller than 1px. If the lines appear to
increase in thickness, you are probably looking at this page on a
high-quality computer screen or on paper. And if 1pt looks thicker
than 1.5px, you probably have a handheld screen.

The magic unit of CSS, the , is a often a good
unit to use, especially if the style requires alignment of text to
images, or simply because anything that is 1px wide or a multiple
of 1px is guaranteed to look sharp.

But for font sizes it is even better to use .
The idea is (1) to not set the font size of the BODY element (in
HTML), but use the default size of the device, because that is a
size that the reader can comfortably read; and (2) express font
sizes of other elements in : to make the H1 2½ times as big as the normal, body
font.

The only place where you could use (or or ) for setting a font size is in
style sheets for print, if you need to be sure the printed font is
exactly a certain size. But even there using the default font size
is usually better.

vh и vw

Адаптивный веб-дизайн полностью полагается на процентные соотношения. Но использование процентов CSS не всегда является лучшим решением. CSS ширина всегда относительна ближайшего родительского элемента. Но что если вы хотите использовать ширину или высоту viewport вместо таковых родительского элемента? Это как раз тот случай, когда стоит использовать и .

равен 1/100 высоты viewport. Например, если высота браузера , будет равен 9px. Таким же образом, если ширина равна , то будет равен .

Вариантов использования этих правил множество. Например, простым способом сделать слайды в полную высоту будет написание всего одной строчки кода:

Представьте, что вам необходимо сделать заголовок, который займет всю ширину экрана. Чтобы сделать это, следует задать размер шрифта в . Этот размер будет увеличиваться вместе с размером экрана.

Пиксели: px

Пиксель – это самая базовая, абсолютная и окончательная единица измерения.

Количество пикселей задаётся в настройках разрешения экрана, один – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.

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

Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.

Достоинства

Главное достоинство пикселя – чёткость и понятность

Недостатки

Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами

Давно на свалке: , , ,

Существуют также «производные» от пикселя единицы измерения: , , и , но они давно отправились на свалку истории.

Вот, если интересно, их значения:

• (мм) =
• (см) =
• (типографский пункт) =
• (типографская пика) =

Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.

Почему в сантиметре содержится ровно 38 пикселей?

В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.

Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в .

Поэтому ни о каком соответствии реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.

Что насчет rem и Sass?

Единица rem в CSS всегда наследует значение размера шрифта корневого элемента независимо от вычисленного размера шрифта. В HTML корневым является элемент <html>. Таким образом можно использовать rem. Но это означает, что вы должны будете управлять всеми компонентами на странице, используя размер шрифта этого элемента. Это может сработать в некоторых проектах, но я думаю, что этот метод лучше всего работает при изменении размеров отдельного компонента, а не всего документа.

Что касается использования препроцессора Sass, то это уже второстепенный вопрос. В итоге CSS будет использовать любые единицы измерения, которые указаны в Sass коде, и наследование будет работать таким же образом.

Новые псевдоклассыСкопировать ссылку

Единицы измерения и значения — это всё прекрасно, но особенно меня радуют селекторы и псевдоклассы. Когда у меня получается выдумать замысловатый селектор, даже если он в итоге будет запрятан там, где только немногие избранные смогут его найти, я всегда чувствую себя мастером своего дела. Перефразируя отца Стива Джобса: ты должен сделать так, чтобы забор со стороны твоего дома выглядел так же хорошо, как со стороны улицы, даже если больше никто не будет знать, что это так — ведь ты будешь.

Для меня стало откровением, когда я впервые использовал , это было словно я вышиб ногой двери восприятия… Окей, я чуть-чуть преувеличиваю. Но есть несколько новых CSS-псевдоклассов, относительно которых действительно стоит испытывать энтузиазм.

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthobject-fitopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerighttab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapz-index

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Запомнить

1. Абсолютные единицы измерения, кроме пикселя, применяются крайне редко. Размер пикселя в верстке отличается от пикселя экрана и составляет 1/96 дюйма.
2. Относительные единицы измерения не имеют точных размеров и зависят от других значений. Проценты используйте, когда нужно задать размеры относительно родительского контейнера. Viewport помогает задать размер относительно видимой области экрана.
3. Viewport широко используется в отзывчивой типографике для масштабируемости текста. Когда вы хотите ограничить масштабируемость, применяйте функцию calc (). Задавайте фиксированный размер шрифта и добавляйте к нему изменяемый параметр vw.
4. Среди шрифтозависимых единиц обычно используют em и rem. Если размер шрифта не задан, em будет равен 16px, потому что именно этот размер установлен по умолчанию в большинстве браузеров.
5. Для верстки дизайн-макетов со строгими пропорциями применяйте em и rem. Тогда при внесении изменений в макет и выборе другого размера шрифта вам будет нужно только прописать новый шрифт. Остальной дизайн пропорционально перестроится под новые параметры и будет снова выглядеть гармонично.
6. При выборе единиц измерения принимайте решение в каждом конкретном случае. Основывайтесь на простоте применения и дальнейшей поддержки.

@media запросы

Существует два подхода адаптивной вёрстки по размерам области просмотра (viewport) — Mobile First и Desktop First.

При Mobile First верстаем от меньшего экрана к большему и применяем

При Desktop First верстаем от большего экрана к меньшему и применяем

На практике Mobile First встречается реже, чем Desktop First, поэтому обычно сначала верстаем макет для больших экранов, затем с помощью @media запросов адаптируем макет под меньшие экраны, используя контрольные точки (breakpoints).

@media запросы записываются в CSS файле следующим образом

Разница в 0.02px нужна для избежания пересечения @media запросов, чтобы разные стили не применялись для двух разных @media запросов одновременно

Абсолютные единицы измерения длины в CSS

Абсолютные единицы измерения CSS не подходят для веб-дизайна. Они представляют собой цифровое обозначение результатов измерений в физическом мире и не зависят от размера и разрешения экрана. Абсолютные длины с одним и тем же значением могут отличаться на разных экранах. Это вызвано различием DPI экрана (точек на дюйм).

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

Абсолютные единицы измерения длины:

• cm (сантиметры);
• mm (миллиметры);
• in (дюймы);
• pc (пики);
• pt (пункты);
• px (пиксели).

Большинство абсолютных единиц длины бесполезны в интернете. Единственным исключением является px. Пиксели являются относительными единицами по отношению к разрешению экранов. Для принтеров и мониторов с очень высоким разрешением один пиксель в CSS равняется нескольким пикселям на экране, так что число px на дюйм составляет около 96. Пиксель является наименьшей единицей измерения и обычно используется в качестве ориентира для других.

Case 1: Properties of all Elements Scale With The Component’s Font-Size

Let’s begin with an example of what such a component looks like:

How component resizes (Case 1)

Notice how the , and of all elements within the component change at the same time?

If your component behaves in this manner when resized, you need to size everything in s. The code then becomes:

Then, to activate the change in sizes, all you have to do is to change the component’s property.

So far so good.

Now, let’s bring the complexity up a bit.

Imagine if you had a grid like this. The vertical and horizontal spaces between each grid item needs to remain the same across all devices (for good aesthetics).

Equal margins on a 1 + 2 grid!

The markup for this grid is:

I’ve set the gutter width between each grid item to be at a root of . In order words, the computed width of the gutter is .

The challenge in this grid is to separate small component A and small component B with a margin of . We can try setting a of component B to be for start.

Unfortunately, this doesn’t turn out well. The between small component A and small component B is larger than the gutter width at a viewport above 800px.

Space between the two smaller components isn’t equal to the gutters when the screen is wider than 800px

Boo 🙁

This happens because the of the component is (or ) when the viewport is larger than . Since the is , the computed value of becomes , which is different from the we were looking for.

Grrrrr! (╯°□°）╯︵ ┻━┻

Thankfully, we can solve this issue simply by sizing in since we know where the gutter width needs to be sized according to the root .

Vertical space is now equal! 🙂

Tada! Problem solved 🙂 Here’s a Codepen for you to play with.

See the Pen REM vs EM – Case 1 by Zell Liew (@zellwk) on CodePen.

Note: You need to use Flexbox to build this grid. I won’t explain how I built it since it’s way out of scope. Check out this article if you’re interested in finding out more about Flexbox

Oh by the way, I didn’t come up with this technique. Chris Coyier wrote about it a year ago. (He’s a genius).

Anyway, are we good so far? If yes, let’s move on to case 2. If not, feel free to leave a comment and I’ll figure a way to explain this further.

More units in CSS

To make it even easier to write style rules that depend only on
the default font size, CSS has since 2013 a new unit: the . The (for “root em”) is the font
size of the root element of the document. Unlike the , which may be different for each element, the is constant throughout the document. E.g., to give P
and H1 elements the same left margin, compare this pre-2013 style
sheet:

p { margin-left: 1em }
h1 { font-size: 3em; margin-left: 0.333em }

with the new version:

p { margin-left: 1rem }
h1 { font-size: 3em; margin-left: 1rem }

Other new units make it possible to specify sizes relative to
the reader’s window. These are the and . The is 1/100th of the window’s width
and the is 1/100th of the window’s height. There
is also , which stands for whichever is the
smallest of and . And . (You can guess what it does.)