Css в em: px, em, rem и другие

Содержание

Единицы измерения в CSS | Techrocks

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться ×

Перевод статьи «Units in CSS (em, rem, pt, px, vw, vh, vmin, vmax, ex, ch, …)».

В CSS есть разные единицы измерения. Больше всего известны пиксели, но есть и другие – не такие популярные, но весьма удобные в некоторых случаях.

В этой статье мы рассмотрим относительные и абсолютные единицы измерения, а также единицы измерения области просмотра (viewport-единицы).

Относительные единицы измерения

Размеры в CSS можно указывать не только в абсолютных единицах, таких как пиксели, поинты или сантиметры, но и в относительных – в процентах, em или rem. Использование относительных единиц измерения также помогает придерживаться стандартов доступности.

В большинстве браузеров по умолчанию установлен размер шрифта 16px. Это значение можно использовать при расчетах (например, 16px равны 1em, 1rem или 100%).

Давайте рассмотрим, какие же относительные единицы измерения у нас есть.

% – измерение в процентах.
em – размер шрифта относительно обычного, т. е., если шрифт имеет размер 2.5em, значит, он в 2,5 раза больше обычного шрифта.
rem – размер шрифта относительно корневого элемента документа.
ch – ширина символа «0». В моноширинных шрифтах, где все символы имеют одинаковую ширину, 1ch это ширина одного символа.
ex – x-высота текущего шрифта, измеряется в высоте символа «х» в нижнем регистре.

See the Pen CSS Relative Units by Matthias (@fullstack-to) on CodePen.

Чем отличаются em и rem?

Разница между этими единицами в наследовании. Значение rem основывается на корневом элементе (html). Каждый дочерний элемент в качестве основы для вычислений использует размер шрифта элемента html.

А в единицах em вычисления основаны на размере шрифта родительского элемента.

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

Различные семейства шрифтов

Все представленные на картинке шрифты имеют один размер (18pt), но благодаря красной линии видно, что x-высота (ex) у этих шрифтов разная.

На этой картинке шрифты имеют все тот же одинаковый размер (18pt). Но они отличаются шириной, т. е., их размер в единицах ch будет разным. Символы моноширинных шрифтов имеют одинаковую ширину, а в serif или sans-serif символы отличаются по ширине (например, «i» будет уже, чем «o»).

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

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

cm – сантиметры. 1 cm = 1 cm
mm – миллиметры. 10 mm = 1 cm
in – дюймы (inches). 1 in = 96px = 2.54 cm
px – пиксели. 1 px = 1/96 от 1 in
pt – поинты (points). 1 pt = 1/72 от 1 in

pc – пайки (пики, англ. pica). 1pc = 12 pt

See the Pen CSS Absolute Units by Matthias (@fullstack-to) on CodePen.

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

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

vw – 1% от ширины области просмотра (50% это половина ширины области просмотра).
vh – 1% от высоты области просмотра (50% это половина высоты области просмотра).
vmin – 1% от меньшего размера ширины или высоты области просмотра (т. е., если ширина меньше высоты, то vmin рассчитывается от ширины, при этом 1 vmin = 1 vw).
vmax – 1% от большего размера ширины или высоты области просмотра (т. е., если высота больше ширины, то vmax рассчитывается от высоты, при этом 1 vmax = 1 vh).

See the Pen Viewport Units by Matthias (@fullstack-to) on CodePen.

vmin и vmax могут изменяться в зависимости от изменения размера окна браузера или смены ориентации мобильного телефона.

Значения свойств CSS — Изучение веб-разработки

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

В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например

<color> или <length>. Если вы видите значение <color> как действительное для определённого свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечислено на странице <color>.

Note: You’ll also see CSS values referred to as data types. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value.

Note: Yes, CSS values tend to be denoted using angle brackets, to differentiate them from CSS properties (e.g. the

color (en-US) property, versus the <color> data type). You might get confused between CSS data types and HTML elements too, as they both use angle brackets, but this is unlikely — they are used in very different contexts.

В следующем примере мы установили цвет нашего заголовка используя ключевое слово и фон используя функцию rgb():

h2 {
  color: black;
  background-color: rgb(197,93,161);
}

Значение в CSS это путь определения коллекции допустимых под-значений. То есть если вы видите <color> как применённый, то вам не надо озадачиваться какой из разных типов значения цвета может быть использован — ключевое слово, hex значение, функция

rgb() и т.д. Вы можете воспользоваться любым доступным значением <color> при условии, что они поддерживаются вашим браузером. Страницы для всех значений на MDN дадут вам информацию о поддержке браузеров. Например, если вы посмотрите на страницу <color> то вы увидите раздел совместимости браузеров в котором перечислены различные типы значений цвета и их поддержка.

Давайте посмотрим на некоторые типы значений и единиц с примерами чтобы вы могли опробовать различные возможные значения, с которыми вы можете часто сталкиваться.

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

Тип данных	Описание
`<integer>`	`<integer>` (целое число) — целое число такое как `1024` или `-55`.
`<number>`	`<number>` (число) представляет десятичное число — оно может иметь, а может и не иметь десятичную точку с факториальным компонентом, например `0.255`, `128`, или `-1.2`.
`<dimension>`	`<dimension>` (измерение) это — `<number>` (число) с единицей измерения, прикреплённой к нему, например `45deg`, `5s`, или `10px`. `<dimension>` — это зонт категорий, включающих в себя типы `<length>`, `<angle>`, `<time>`, и `<resolution>` (длина, угол, время и разрешение).
`<percentage>`	`<percentage>` (проценты) представляют собой долю некоторого другого значения, например `50%`. Процентные значения всегда относительны по отношению к другому количеству, например длина элемента относительна к длине её родительского элемента.

Длины

Числовой тип, с которым вы будете сталкиваться чаще всего это <length> (длина), например 10px (пиксели) или 30em. Существует два типа длин используемых в CSS — относительные и абсолютные. Важно знать разницу для того, чтобы понимать, насколько большими станут вещи.

Абсолютные единицы длины

Ниже приведены все единицы абсолютной длины — они не являются относительными к чему-либо и обычно считаются всегда одинакового размера.

Единицы	Название	Эквивалент
`cm`	Centimeters/Сантиметры	1cm = 96px/2.54
`mm`	Millimeters/Миллиметры	1mm = 1/10th of 1cm
`Q`	Quarter-millimeters/Четверть-мм	1Q = 1/40th of 1cm
`in`	Inches/Дюймы	1in = 2.54cm = 96px
`pc`	Picas/Пики	1pc = 1/16th of 1in
`pt`	Points/Точки	1pt = 1/72th of 1in
`px`	Pixels/Пиксели	1px = 1/96th of 1in

Большинство из этих значений больше полезны при использовании печати, чем для вывода на экран. Например, мы обычно не используем cm (сантиметры) на экране. Единственное значение которое вы в основном будете использовать это px (пиксели).

Единицы относительной длины

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

Единица	Относительна к
`em`	Размер шрифта родительского элемента.
`ex`	x-высота шрифта элемента.
`ch`	Предварительная мера (ширина) глифа «0» шрифта элемента.
`rem`	Размер шрифта корневого элемента.
`lh`	Высота строки элемента.
`vw`	1% от ширины окна просмотра.
`vh`	1% от высоты окна просмотра.
`vmin`	1% от меньшего измерения ширины окна просмотра.
`vmax`	1% от большего измерения ширины окна просмотра.

Изучение на примере

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

Второй блок имеет ширину, установленную в единицах vw (ширина окна просмотра). Это значение относительно к ширине окна просмотра и таким образом 10vw это 10 процентов от ширины окна просмотра. Если вы измените ширину окна вашего браузера, размер блока должен измениться, однако этот пример встроен в страницу с использованием <iframe>, поэтому это не сработает. Для того чтобы увидеть это в действии вы должны открыть этот пример в отдельной вкладке браузера.

Третий блок использует единицы em. Они относительны к размеру шрифта. Я установил размер шрифта 1em для содержимого <div>, который имеет класс .wrapper. Измените это значение на 1.5em и вы увидите что, размер шрифта всех этих элементов увеличится, но только последний объект станет шире, поскольку его ширина относительна к тому размера шрифта.

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

em и rem

em и rem — две относительные длины, с которыми вы вероятное всего сталкиваетесь чаще при разметке чего-либо от блоков до текста. Стоит понимать как они работают, понимать различия между ними, особенно когда вы начинаете переходить к более сложным темам как стилизация текста или разметка CSS. Приведённый ниже пример показывает это.

HTML это набор вложенных списков — у нас имеется три списка в общей сложности и оба примера имеют одинаковый HTML. Единственное различие в том, что первый имеет класс ems, а второй класс rems.

Чтобы начать, мы установили 16px для размера шрифта элемента <html>.

Повторим, единица em означает «размер шрифта родительского элемента». Элементы <li> внутри <ul> с классом ems получают свои размеры от своего родителя. Так, каждый последующий уровень вложения становится прогрессивно больше, так как каждый имеет свой размер шрифта установленный на 1.3em — 1.3 раза от размера шрифта родителя.

Повторим, единица rem означает «размер шрифта корневого элемента» (rem значит «root em». (root — корень)). Элементы <li> внутри <ul> с классом rems получают свои размеры от корневого элемента (<html>). Это значит, что каждый последующий уровень вложения не продолжает увеличиваться.

Однако, если вы измените font-size (размер шрифта) <html> в CSS, вы увидите что все остальное изменится относительно ему — и rem— и em-размеры текста

Проценты

Во многих случаях проценты обрабатываются таким же образом, как и длина. С процентами фишка в том, что они всегда устанавливаются относительно некоторого другого значения. Например, если вы установите font-size элемента как проценты, то это будет процент от font-size родительского элемента. Если вы используете процент для значения width (ширина), то это будет процент от width родителя.

В примере ниже два блока с размерами в процентах и два с размерами в пикселях имеющих одинаковые имена классов. Оба набора имеют ширину 200px и 40% соответственно.

Различие в том, что второй набор блоков находится внутри обёртки которая имеет ширину 400 пикселей. Второй блок шириной в 200px имеет ту же ширину что и первый, но второй 40 процентный блок теперь имеет 40% от 400px — намного уже чем первый.

Попробуйте изменить ширину обёртки (.wrapper) или процентное значение чтобы увидеть, как это работает.

В следующем примере размер шрифта установлен в процентах. Каждый <li> имеет font-size 80%, поэтому элементы вложенного списка становятся прогрессивно меньше так как они наследуют свои размеры от родителя.

Обратите внимание, в то время как многие значения принимают как длину, так и проценты, существуют те, которые принимают только длину. Вы можете посмотреть какие значения допустимы на справочной странице свойств MDN. Если допустимые значения включают <length-percentage>, тогда вы можете использовать и длину, и проценты. Если же допустимые значения включают только <length>, то использование процентов невозможно.

Числа

Некоторые значения принимают числа без каких-либо единиц измерения. Примером свойства принимающего числа без единиц измерения может служить свойство opacity, которое контролирует мутность элемента (настолько он прозрачен). Это свойство принимает числа между 0 (полностью прозрачное) и 1 (полностью мутное).

В примере ниже, попробуйте изменить значение opacity на различные десятичные значения между 0 и 1 и посмотрите, как блок и его содержимое становится более и/или менее мутными.

Внимание: Когда вы используете числа в CSS в качестве значений, они не должны быть заключены в кавычки.

Существует много способов определения цвета в CSS, некоторые из которых реализованы довольно-таки недавно по сравнению с другими. Одинаковые значения цвета могут использоваться везде в CSS, определяете ли вы при этом цвет текста, цвет фона или цвет чего-либо ещё.

Стандартная система цветов доступная в современных компьютерах — это 24-битная система, которая позволяет отображать около 16.7 миллионов отдельных цветов через комбинацию различных красных, зелёных и синих каналов с 256 различными значениями каждого канала (256 x 256 x 256 = 16,777,216). Давайте взглянем на некоторые способы, с помощью которых мы можем определять цвет в CSS.

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

Ключевые слова цвета

Довольно часто в примерах как здесь, так и на других страницах в MDN вы будете видеть использование ключевых слов цвета, поскольку это простой и понятный способ определения цвета. Существует определённое количество этих ключевых слов и некоторые их них имеют довольно занимательные имена! Полный список вы можете посмотреть на странице значений <color> .

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

Шестнадцатеричные RGB значения

Следующий тип значения цвета, с которым вы сталкиваетесь вероятнее всего — это шестнадцатеричные коды. Каждое hex-значение состоит из символа решётки (#) за которым следуют 6 шестнадцатеричных чисел, каждое из которых может принимать одно из 16 значений от 0 до f (представляющая 15) — то есть 0123456789abcdef. Каждая пара значений представляет один из каналов — красного, зелёного или синего цветов — и позволяет нам определять любой из 256 доступных значений для каждого (16 x 16 = 256).

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

И снова, попробуйте изменить значения, чтобы посмотреть, как варьируют цвета.

RGB и RGBA значения

Третья схема, о которой мы здесь поговорим это RGB. Значения RGB это функция — rgb() — которой даётся три параметра представляющих каналы красного, зелёного и синего значений цветов, во многом так же, как hex-значения. Отличие с RGB является то, что каждый канал представлен не двумя hex-цифрами, а десятичным числом между 0 и 255 — что отчасти проще в понимании.

Давайте перепишем наш последний пример используя RGB цвета:

А также вы можете использовать цвета RGBA — что работает в точности, как и цвета RGB и то есть вы можете использовать любое значение RGB, однако существует четвёртое значение, которое представляет альфа канал цвета, которое контролирует мутность. Если вы установите это значение на 0, то это сделает цвет полностью прозрачным, тогда как 1 сделает его полностью мутным. Значения между дают вам разные уровни прозрачности.

Внимание: Настройка альфа канала в цвете имеет одно ключевое различие в использовании свойства opacity которое мы рассматривали ранее. когда вы используете мутность вы делаете элемент и все внутри него мутным, тогда как при использовании цвета RGBA вы делаете мутным только тот цвет который вы специфицируете.

In the example below I have added a background image to the containing block of our colored boxes. I have then set the boxes to have different opacity values — notice how the background shows through more when the alpha channel value is smaller.

In this example, try changing the alpha channel values to see how it affects the color output.

Note: At some point modern browsers were updated so that rgba() and rgb(), and hsl() and hsla() (see below), became pure aliases of each other and started to behave exactly the same. So for example both rgba() and rgb() accept colors with and without alpha channel values. Try changing the above example’s rgba() functions to rgb() and see if the colors still work! Which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can act as a visual indicator of where transparent colors are being defined in your code.

HSL and HSLA values

Slightly less well-supported than RGB is the HSL color model (not supported on old versions of IE), which was implemented after much interest from designers. Instead of red, green, and blue values, the hsl() function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:

Hue: The base shade of the color. This takes a value between 0 and 360, representing the angles round a color wheel.
Saturation: How saturated is the color? This takes a value from 0–100%, where 0 is no color (it will appear as a shade of grey), and 100% is full color saturation
Lightness: How light or bright is the color? This takes a value from 0–100%, where 0 is no light (it will appear completely black) and 100% is full light (it will appear completely white)

We can update the RGB example to use HSL colors like this:

Just as RGB has RGBA, HSL has an HSLA equivalent, which gives you the same ability to specify the alpha channel. I’ve demonstrated this below by changing my RGBA example to use HSLA colors.

You can use any of these color values in your projects. It is likely that for most projects you will decide on a color palette and then use those colors — and your chosen method of specifying color — throughout the whole project. You can mix and match color models, however for consistency it is usually best if your entire project uses the same one!

The <image> data type is used wherever an image is a valid value. This can be an actual image file pointed to via a url() function, or a gradient.

In the example below we have demonstrated an image and a gradient in use as a value for the CSS background-image property.

Note: there are some other possible values for <image>, however these are newer and currently have poor browser support. Check out the page on MDN for the <image> data type if you want to read about them.

The <position> data type represents a set of 2D coordinates, used to position an item such as a background image (via background-position). It can take keywords such as top, left, bottom, right, and center to align items with specific bounds of a 2D box, along with lengths, which represent offsets from the top and left-hand edges of the box.

A typical position value consists of two values — the first sets the position horizontally, the second vertically. If you only specify values for one axis the other will default to center.

In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.

Play around with these values to see how you can push the image around.

Throughout the examples above, we’ve seen places where keywords are used as a value (for example <color> keywords like red, black, rebeccapurple, and goldenrod). These keywords are more accurately described as identifiers, a special value that CSS understands. As such they are not quoted — they are not treated as strings.

There are places where you use strings in CSS, for example when specifying generated content. In this case the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string.

The final type of value we will take a look at is the group of values known as functions. In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We’ve already seen functions in action in the Colors section — rgb(), hsl(), etc. The value used to return an image from a file — url() — is also a function.

A value that behaves more like something you might find in a traditional programming language is the calc() CSS function. This function gives you the ability to do simple calculations inside your CSS. It’s particularly useful if you want to work out values that you can’t define when writing the CSS for your project, and need the browser to work out for you at runtime.

For example, below we are using calc() to make the box 20% + 100px wide. The 20% is calculated from the width of the parent container .wrapper and so will change if that width changes. We can’t do this calculation beforehand because we don’t know what 20% of the parent will be, so we use calc() to tell the browser to do it for us.

This has been a quick run through of the most common types of values and units you might encounter. You can have a look at all of the different types on the CSS Values and units reference page; you will encounter many of these in use as you work through these lessons.

The key thing to remember is that each property has a defined list of allowed values, and each value has a definition explaining what the sub-values are. You can then look up the specifics here on MDN.

For example, understanding that <image> also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!

Что такое px, em, rem в CSS?

Многие люди путаются при работе с этими тремя единицами в CSS. Главной причиной этого является отсутствие понимания различий имеющихся между ними.

Для начала нужно усвоить базовое понимание этих единиц:

Px (пиксель) – это единица измерения величины объектов относительно размера экрана.
Em – это единица, основанная на размере шрифта родительского элемента (в пикселях).
Rem – это единица,основанная на размере шрифта корневого элемента html (в пикселях).

Мы можем использовать эти единицы в различных свойствах CSS, таких как font-size, padding, margin, position.

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

Пример:

div { font-size: 10px; padding: 10px; }

Эта строка кода CSS устанавливает размер шрифта в 10px и отступы размером в 10px со всех сторон.

Единицы измерения em зависят от размера шрифта родительского элемента. Это не фиксированные единицы, поскольку они зависят от базового размера. Когда изменяется размер родительского элемента, меняется и значение em.

Пример:

div { font-size: 10px; padding: 10em; }

Данный код CSS устанавливает размер шрифта в 10px, и отступы толщиной в 100px с каждой стороны, поскольку размер берётся из свойства font-size. В нем каждое значение принимается за 1em, то есть (10px = 1em, поэтому 10em = 10px * 10 = 100px).

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

Пример:

Допустим, размер шрифта, используемый по умолчанию в браузере – 14px.

div { font-size: 10px; padding: 10rem; }

Этот код установит размер шрифта в 10px и отступы в 140px с каждой стороны. При этом базовым будет размер шрифта по умолчанию, заданный в браузере, который берётся за 1rem. То есть: 14px = 1rem, поэтому 10rem = 14px * 10 = 140px.

Вопрос, который возникает при использовании этих единиц измерения: «Какие же единицы применять?» Особенно это касается em и rem. Какие элементы установить зависимыми от базового размера,а для каких применять динамические единицы измерения?

Задача: задать размер элемента относительно размера шрифта, используемого по умолчанию на сайте, там, где не нужно менять размеры. В этом случае “rem” предпочтительнее.
Чтобы использовать динамические единицы измерения там, где при уменьшении размера шрифта уменьшаются отступы или поля, применяйте “em”.

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

Пример:

div.parent { font-size: 10px; }
div.parent div.child { font-size: 0.5em; }

Этот код установит размер шрифта родительского элемента в 10px, а шрифт дочернего элемента в 5px.Так как его размер зависит от значения font-size родительского элемента, которое принимается за 1em. То есть:10px = 1em, поэтому 0.5em = 10px / 2 = 5px.

Предположим, что размер шрифта, используемый по умолчанию в браузере,составляет 14px. Как это отразится на всех трёх единицах измерения?

Пример:

div.parent { font-size: 10px; padding: 10em; margin: 10rem;}
div.parent div.child { font-size: 0.5em; padding: 10em; margin:10rem}

Для (div.parent)

Размер шрифта = 10px.
Внутренние поля с каждой стороны (10px = 1em, поэтому 10em * 10px) = 100px.
Отступы с каждой стороны (14px = 1rem, поэтому 10rem * 14px) = 140px.

Для (div.child)

Размер шрифта (0.5em = 10px / 2) = 5px.
Внутренние поля с каждой стороны (5px = 1em, поэтому 10em * 5px) = 50px.
Отступы с каждой стороны (14px = 1rem, поэтому 10rem * 14px) = 140px.

Ключевым для стилей дочернего элемента является свойство font-size, поскольку оно наследуетсяот родительского элемента.Для него размер шрифта задан в 10px, а в дочернем элементе он установлен в 0.5em. То есть, делится на два (как размер шрифта дочернего элемента).

Поля зависят от размера шрифта текущего элемента. За 1em принимается размер в 5px, (размер шрифта дочернего элемента).

Только отступы постоянны в обоих случаях. Они напрямую наследуются от корневого элемента html. Базовый размер шрифта в 14px неизменен, поэтому поля будут иметь размер 140px в обоих случаях.

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

Пожалуйста, опубликуйте ваши мнения по текущей теме материала. За комментарии, дизлайки, отклики, подписки, лайки низкий вам поклон!

Сергей Бензенкоавтор-переводчик статьи «Use of px, em, rem units in css, which one I have to use and when?»

О единице измерения em в CSS

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

В CSS единица измерения em равна текущему размеру шрифта элемента, к которому применяется em. Когда единицы измерения em используются в дочерних элементах, которые не имеют определенного размера шрифта, они наследуют его от родителей, вплоть до корневого элемента документа.

Посмотрите на следующий код CSS:

.example {
    font-size: 20px;
}

В данном случае 1em этого элемента или его дочерних элементов (при отсутствии других определений font-size) будет равен 20px. Так что, если мы добавим строку:

.example {
    font-size: 20px;
    border-radius: .5em;
}

Значение border-radius равное 5em будет равно 10px (то есть 20 * 0,5). Аналогично:

.example {
    font-size: 20px;
    border-radius: .5em;
    padding: 2em;
}

Значение отступа 2em будет равно 40px (20 * 2). Как уже упоминалось, этот тип вычислений применяется к любым дочернему элементу, если у него нет явно определенного размера шрифта. Тогда величина единицы измерения em в CSS будет вычислена подобным образом.

Если в CSS размер шрифта не определен, то em будет равна размеру шрифта, используемого по умолчанию в браузере. Чаще всего это значение составляет 16px. Давайте рассмотрим, как можно использовать этот метод для легкого изменения размера элементов.

Понятие «компоненты» довольно популярно сейчас. Оно хорошо подходит для модульных методов CSS, а также для идеи инкапсулированных разделов кода в целом. И я предполагаю, что следующий метод будет еще более интересным, когда веб-компоненты получат широкую поддержку.

Метод работает следующим образом: используется свойство font-size, которое создает основную единицу для различных элементов внутри модуля. Поскольку единица измерения em рассчитывается на основе font-size родительского элемента, то это делает весь компонент легко редактируемым путем изменения свойства font-size родительского элемента.

Давайте посмотрим на это в действии:

Этот модуль состоит из четырех основных элементов. Подвигайте слайдер в верхней части на демонстрационной странице, чтобы изменить размер модуля. Если хотите, можете просмотреть его в полноэкранном режиме. Слайдер содержит одно значение корневого элемента компонента: значение font-size.

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

Когда размер шрифта изменяется, это сказывается на всех em CSS значениях родительского элемента, а также всех его дочерних элементах, делая все части компонента пропорционально гибкими.

Обратите внимание, что:

Внутри компонента все размеры задаются с помощью em. Кроме внешней границы и изображения, которое при желании можно изменить, но меня устраивает размер, который в данном случае статичен;
Значок в правом верхнем углу, похожий на слезинку — это псевдоэлемент, который аналогичным образом использует размер шрифта родительского элемента;
CSS также включает в себя два медиа-запроса, которые корректируют размер шрифта родительского элемента. Что показывает полноценность этого метода, потому что не нужно менять все размеры в медиа-запросах, а только размер шрифта.

Как видно на примере, этот тип гибкого изменения размера не всегда то, что стоит использовать. Его можно несколько ограничить.

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

Не нужно использовать пиксели, чтобы установить корневой font-size. Вы можете использовать для этого em, но помните, что эти единицы измерения будут передаваться по наследству от родителей.

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

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

Я считаю, что это хороший метод для использования при создании CSS-фреймворка или библиотеки компонентов. Этот метод убедительно доказывает, насколько мощным средством является единица измерения em в CSS.

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

ВЛВиктория Лебедеваавтор-переводчик статьи «The Power of em Units in CSS»

В чем разница между единицами CSS em и ch?

Я просмотрел все ответы, а также ваши комментарии к ним, и у меня сложилось впечатление, что вы хотите использовать em и ch единиц в основном для width или height свойств.

[…] тогда они не подходят для установки ширины поля?

И с моей точки зрения, я бы не рекомендовал этого делать.

СН-Единицы

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

Я передумал и теперь вижу хорошее реальное применение ch . 🙂

Пример input для года, так что всегда есть ширина для четырех чисел, будет сохраняться. Но ch также очень полезен для правильного определения ширины текста абзаца.

С пикселями, относительными или процентными значениями очень трудно — особенно для адаптивного дизайна — установить идеальную ширину текста на строку, включая интервал для абзаца. Однако это может быть ответственностью за пользовательский опыт на веб-сайте. Абстракция от Atlassian Design идеально подходит:

Установите среду чтения в соответствии с требованиями читателя. Широкие строки текста трудно читать, и людям труднее сосредоточиться. Хотя нет правильного способа измерить идеальную ширину текста, хорошая цель состоит в том, чтобы стремиться к 60-100 символам на строку, включая интервал. Установка оптимальной длины строки разбивает содержимое на легко усваиваемые блоки.
Источник: Atlassian Design

Именно здесь ch может быть идеально использован в качестве единицы измерения. Для лучшего обзора вы можете посмотреть примеры в конце.

Но теперь, наконец, к определению ch 😉

Как часто говорилось, ch относится к ширине символа 0 в соответствии с размером шрифта.

Например: тело имеет font-size: 16px , а символ 0 имеет ширину 10px из выбранного семейства шрифтов, тогда 1ch равно 10px . И даже это все еще неточно, потому что, например, italic или bold могут изменить ширину символа.

EM — & REM-единиц

Как также часто говорят, em — и чтобы привлечь еще одного игрока — также rem относятся к font-size .

Где rem всегда относительно корневого элемента font-size , em относительно font-size собственного элемента или последнего родительского элемента (также может быть корневым элементом) с font-size .

Как пример em : только body имеет font-size: 16px; , а сам элемент не получил font-size , тогда 1em равно 16px . Если родитель элемента или сам элемент получил font-size: 20px; , то 1em равно 20px . em единиц также могут размножаться сами по себе.

Как пример rem : body имеет font-size: 16px; , тогда 1rem равно 16px . Даже если сам элемент или родительский элемент получил font-size: 20px; , 1rem все равно равен body настройкам 16px . […]

, если ch имеет размер ‘0’ в шрифте, почему em не имеет размера ‘M’ в шрифте […]

em первоначально был основан на типографском измерении текущего символа шрифта M , но он уже устарел. Как вы можете видеть сейчас, он всегда ссылается на «fixed start-value», а не на ширину символа.

Рекомендуемое использование

Как я уже сказал, с моей точки зрения , я бы не рекомендовал использовать ch, em или rem для свойств width или height . Эти единицы измерения более полезны для свойств «textual».

Некоторые примеры:

Все h3 должны быть в четыре раза больше текста: font-size: 4rem;
Все p всегда должны иметь margin из половины строки: margin-bottom: 0.5em;
line-height элементов должно быть 20% больше, чем font-size : line-height: 1.2em;
A input за год всегда должен иметь width из четырех чисел: width: 4ch;
Ширина текста p всегда должна иметь ширину 80 символов на строку, включая интервал: width: 80ch;

но пиксели не являются гибкими при работе с различными устройствами

Для этого, в качестве вывода, я бы посоветовал вам просто работать с процентами width: 80%; или шириной видового экрана и высотой видового экрана height: 100vh; width: 100vw; . Или, по крайней мере, всегда с максимальным значением: width: 1000px; max-width: 100%; .

Вот несколько фрагментов — только для примеров со свойствами width — для лучшего понимания:

em — Относительно размера шрифта собственного элемента или последнего родительского элемента с размером шрифта

body {
  font-size: 16px;
}

p {
  font-weight: bold;
}

div {
  width: 1em;
  height: 50px;
  background: lightgray;
}

.em-0-5 {
  width: 0.5em;
}

.em-10 {
  width: 10em;
}

.fs-10 {
  font-size: 10px;
}

.parent {
  font-size: 0.5em;
}

.parent div {
  width: 10em;
}

<p>1em (body font-size * 1 = 16px)</p>

<div></div>

<p>0.5em (body font-size * 0.5 = 8px)</p>

<div></div>

<p>10em (body font-size * 10 = 160px)</p>

<div></div>

<p>10em from 10px own element font-size (element font-size * 10 = 100px)</p>

<div></div>

<p>10em from 0.5em parent font-size (body font-size * parent font-size * 10 = 80px)</p>

<span>

  <div></div>

</span>

rem — Относительно размера шрифта корневого элемента

body {
  font-size: 16px;
}

p {
  font-weight: bold;
}

div {
  width: 10rem;
  height: 50px;
  background: lightgray;
}

.parent {
  font-size: 20px;
}

.parent div {
  width: 5rem;
}

<p>10rem (body font-size * 10 = 160px)</p>

<div></div>

<p>5rem in a parent element with font-size 20px (body font-size * 5 = 80px)</p>

<span>

  <div></div>

</span>

ch — Относительно ширины «0» (ноль)

body {
  font-size: 16px;
}

p {
  font-weight: bold;
}

input {
  width: 4ch;
}

div {
  width: 20ch;
  background: lightgray;
  word-wrap: break-word;
}

.ch-1 {
  width: 1ch;
}

.ch-5 {
  width: 5ch;
  font-size: 32px;
}

<p>4ch (space of 4x zero character)</p>

<input type="text" value="2018" />

<p>20ch (space of 20x zero characters)</p>

<div>0000000000000000000000000</div>

<p>Also 20ch (space of 20x zero characters)</p>

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et </div>

<p>1ch (space of 1x zero character)</p>

<div>00000</div>

<p>5ch from font-size 32px (space for 5x zero characters with a font-size of 32px)</p>

<div>0000000000000000000000000</div>

Разница между единицами измерения px и em, rem в css

Возможности PX

IE не может настроить размер шрифта, который использует пиксель как единицу измерения;
Причина, по которой большинство зарубежных веб-сайтов можно настраивать, заключается в том, что они используют em или rem в качестве единицы шрифта;
Firefox может настраивать px, em и rem, но более 96% китайских пользователей сети используют браузер IE (или ядро).

px пиксели (пиксель). Единица относительной длины. Пиксель в пикселях относится к разрешению экрана монитора. (Цитируется из руководства CSS2.0)

Как сделать 1em равным 10 строкам пикселей;

Высота шрифта по умолчанию любого браузера составляет 16 пикселей.
Все неотрегулированные браузеры соответствуют: 1em = 16px.
Тогда 12px = 0,75em, 10px = 0,625em.
Чтобы упростить преобразование font-size, вам необходимо объявить Font-size = 62,5% в селекторе body в css, что делает значение em 16px * 62,5% = 10px, поэтому 12px = 1.2em, 10px = 1em, что означает, что вам нужно только разделить исходное значение в пикселях на 10, а затем заменить его на em в качестве единицы.

EM особенности

Значение em не фиксировано;
em унаследует размер шрифта родительского элемента.

Поэтому, когда мы пишем CSS, нам нужно обращать внимание на два момента:

Селектор тела объявляет размер шрифта = 62,5%;
Разделите исходное значение в пикселях на 10 и замените его на em в качестве единицы;
Пересчитайте значения em для увеличенных шрифтов. Избегайте повторного объявления размера шрифта.

То есть, чтобы избежать явления 1,2 * 1,2 = 1,44. Например, если вы объявляете размер шрифта 1.2em в #content, тогда, когда вы объявляете размер шрифта p, вы можете использовать только 1em вместо 1.2em, потому что этот em не тот em, и он наследует высоту шрифта #content. Он становится 1em = 12px.

rem особенности

rem этоCSS3Добавлена новая относительная единица (корень em, корень em), которая привлекла всеобщее внимание. В чем разница между этим устройством и em? Разница в том, что при использовании rem для установки размера шрифта для элемента это все еще относительный размер, ноПротивоположным является только корневой элемент HTML.. Можно сказать, что этот модуль сочетает в себе преимущества относительного и абсолютного размера. Благодаря ему все размеры шрифтов можно регулировать пропорционально только путем изменения корневого элемента, а также можно избежать цепной реакции послойного изменения размера шрифта. В настоящее время rem поддерживают все браузеры, кроме IE8 и более ранних версий. Для браузеров, которые его не поддерживают, решение также очень простое: написать объявление абсолютной единицы измерения. Эти браузеры игнорируют размер шрифта, установленный с помощью rem.
Пример:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>rem</title>
    <style type="text/css">
        html{
            font-size: 40px;
        }
        #first {
            font-size: 90px;
        }
        #second {
            width: 1rem;
            height: 1rem;
            background: gray;
        }
    </style>
</head>
<body>
<div>
    <div>
        <p> Я </p>
    </div>
</div>
</body>
</html>

нота:
Выбор используемого шрифта в основном определяется вашим проектом. Если ваша пользовательская база использует последнюю версию браузера, рекомендуется использовать rem. Если вы хотите учитывать совместимость , затем используйте px или оба.

Размер шрифта CSS. Единицы измерения px, em, проценты — учебник CSS

Для обозначения размера шрифта в CSS необходимо указать соответствующее свойство и его значение. Размер шрифта определяется свойством font-size, для которого может быть установлен один из нескольких вариантов значений. Можно задать размер шрифта в пикселях, процентах, с помощью ключевых слов и т. д. Все это мы рассмотрим далее в этой подглаве, а сейчас взгляните на примеры задания размера шрифта:


/* в процентах: */
h2 {
	font-size: 100%;
}


/* в единицах измерения em: */
h3 {
	font-size: 1em;
}


/* в пикселях: */
h4 {
	font-size: 18px;
}


/* с помощью ключевого слова: */
p {
	font-size: small;
}

Размер шрифта в пикселях

Наиболее простой и понятный способ задать размер шрифта – использовать единицу измерения px. Вы сами указываете высоту шрифта. Допустим, вам необходим шрифт размером 24 пикселя. Для этого запишите стиль CSS:


font-size: 24px;

Размер шрифта в процентах

Вы наверняка уже сталкивались с ситуацией, когда размер шрифта в CSS не задан, вследствие чего браузеру приходится определять размер шрифта «по своему усмотрению». Если точнее, берется предустановленное значение по умолчанию. Именно от него зависят установленные в процентах значения. Например, базовый размер основного текста p, как правило, равняется 16 пикселям. Значение 100% эквивалентно базовому размеру шрифта, который предустановлен в браузере. Поэтому:


p {
	font-size: 100%;
}

/* ...то же самое, что и значение в браузере по умолчанию: */

p {
	font-size: 16px;
}

Если же в этом случае задать размер шрифта 50%, то он будет равен половине базового размера. Значение 200%, наоборот, увеличит шрифт в два раза.

Важно: процентные значения размера шрифта наследуются. Например, если для родительского тега задан размер шрифта 150%, то все вложенные в него теги также унаследуют это значение.

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

По принципу работы единица измерения em похожа на проценты. Значение 1em эквивалентно 100% и соответствует базовому размеру шрифта по умолчанию. Соответственно, 0.6em = 60%, 3em = 300% и так далее. Пример записи:


font-size: 0.9em;

/* перед точкой можно опустить ноль: */

font-size: .9em;

Значения размеров шрифтов, указанные в em, наследуются (как и проценты). Это создает некоторые трудности при работе с CSS. Например, если для родительского элемента div задан размер шрифта 2em, то для вложенного в него такого же элемента div шрифт будет увеличен еще в два раза. Наглядный пример можно увидеть на скриншоте:

Скриншот: наследование значений размеров шрифтов

В качестве альтернативы можно воспользоваться новой единицей измерения, введенной в CSS3 – rem, которая всегда отталкивается от базового размера шрифта. Если в нашем примере изменить значение div с 2em на 2rem, то размер шрифта вложенного элемента div станет таким же, так у родительского. Недостатком единицы измерения rem является то, что она не поддерживается некоторыми браузерами, а именно Internet Explorer версии 8 (и ранее), а также Opera Mini 8.

Ключевые слова

Задать размер текста CSS можно и с помощью специальных ключевых слов, которые также зависят от базового размера шрифта в браузере. Если ориентироваться на стандартный размер шрифта для основного текста (16 пикселей) и не брать во внимание случаи, когда базовый размер был изменен, то таблица ниже показывает соответствие между ключевым словом и размером шрифта в пикселях:

Ключевое слово	Размер в пикселях
xx-small	9px
x-small	10px
small	13px
medium	16px
large	19px
x-large	24px
xx-large	32px

Как видим, значение medium соответствует базовому размеру шрифта 16px. Использование ключевых слов ограничивает возможности и лишает гибкости, поэтому профессиональные разработчики не применяют их.

Завершение

В этой подглаве вы узнали, как задать размер шрифта в CSS. Также мы рассмотрели те единицы измерения, которые наиболее часто используются для установки размера шрифта в таблицах стилей. Для этих целей могут сгодиться и другие единицы измерения CSS, такие как дюймыin, сантиметрыcm, миллиметрыmm. Но они не слишком хорошо подходят для определения размера текста на веб-страницах, отображаемых на мониторе.

Читайте далее: как установить жирный шрифт и курсив в CSS.

единиц CSS

Единицы CSS

CSS имеет несколько различных единиц для выражения длины.

Многие свойства CSS принимают значения длины, такие как ширина , поле , отступ , размер шрифта и т. Д.

Длина — это число, за которым следует единица длины, например 10px , 2em и т. Д.

Пример

Установите разные значения длины, используя px (пиксели):

h2 {
размер шрифта: 60 пикселей;
}

p {
font-size: 25px;
высота строки: 50 пикселей;
}

Попробуйте сами »

Примечание: Пробел не может быть между числом и единицей измерения.Однако если значение 0 , блок можно не устанавливать.

Для некоторых свойств CSS разрешена отрицательная длина.

Существует два типа единиц длины: абсолютных и относительных .

Абсолютные длины

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

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

Установка	Описание
см	см Попытайся
мм	миллиметров Попытайся
дюйм	дюймов (1 дюйм = 96 пикселей = 2,54 см) Попытайся
пикселей *	пикселей (1 пиксель = 1/96 часть 1 дюйма) Попытайся
пт	точек (1pt = 1/72 от 1in) Попытайся
шт	пик (1 шт. = 12 пт) Попытайся

* Пикселей (пикселей) относительно устройства просмотра.Для устройств с низким разрешением 1 пиксель — это один пиксель (точка) дисплея устройства. Для принтеров и высокого разрешения экраны 1px подразумевает несколько пикселей устройства.

Относительная длина

Единицы относительной длины определяют длину относительно другого свойства длины. Относительные единицы длины лучше масштабируются между различными средами визуализации.

Установка	Описание
выс.	Относительно размера шрифта элемента (2em означает 2-кратный размер текущего шрифта)	Попробовать
бывш.	Относительно высоты x текущего шрифта (используется редко)	Попробовать
шасси	Относительно ширины «0» (нуля)	Попробовать
rem	Относительно размера шрифта корневого элемента	Попробовать
VW	Относительно 1% ширины области просмотра *	Попробовать
vh	Относительно 1% высоты области просмотра *	Попробовать
vmin	Относительно 1% меньшего размера области просмотра *	Попробовать
vmax	Относительно 1% большего размера области просмотра *	Попробовать
%	Относительно родительского элемента	Попробовать

Совет: Единицы em и rem идеально подходят для создания идеальных масштабируемый макет!
* Viewport = размер окна браузера.Если область просмотра 50 см широкий, 1vw = 0,5 см.

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую единица длины.

Блок длины
em, ex,%, px, cm, mm, in, pt, pc	1,0	3,0	1,0	1,0	3,5
шасси	27.0	9,0	1,0	7,0	20,0
rem	4,0	9,0	3,6	4,1	11,6
vh, vw	20,0	9,0	19,0	6,0	20,0
vmin	20,0	12,0	19,0	6.0	20,0
vmax	26,0	16,0	19,0	7,0	20,0

em, px, pt, cm, in…

См. Также указатель всех подсказок.

На этой странице:

см , пикселей , пикселей , см , дюймов …

CSS предлагает несколько различных единиц для выражения длины.Некоторые из них имеют свою историю в типографике, например point ( pt ) и pica ( pc ), другие известны из повседневное использование, например, сантиметр ( см, ) и дюйм ( из ). А еще есть «магический» юнит, который был придумано специально для CSS: пикселей . Это Значит, разным свойствам нужны разные блоки?

Нет, единицы не имеют ничего общего с недвижимостью, но все, что есть на носителе: экран или бумага.

Нет никаких ограничений на то, какие единицы можно использовать и где. Если свойство принимает значение в пикселей (поле : 5px) также принимает значение в дюймах или сантиметрах. ( поле: 1,2 дюйма; поле: 0,5 см ) и наоборот.

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

	Рекомендуется	Периодическое использование	Не рекомендуется
Экран	em, пикс,%	пр.	pt, cm, mm, in, pc
Печать	em, см, мм, дюйм, пт, шт,%	пикселей, бывш.

Соотношение между абсолютными единицами измерения выглядит следующим образом: 1 дюйм = 2.54 см = 25,4 мм = 72 точки = 6 шт.

Если у вас под рукой есть линейка, вы можете проверить точность вашего устройства. это: вот коробка высотой 1 дюйм (2,54 см): ↑
72pt
↓

Так называемые абсолютных единиц ( см , мм , в , pt и pc ) в CSS означают то же самое, что и везде, , но только если ваше устройство вывода имеет достаточно высокое разрешение. на лазерный принтер, 1 см должен быть ровно 1 сантиметр.Но на устройства с низким разрешением, такие как экраны компьютеров, CSS не требуют этого. И действительно, результат имеет тенденцию отличаться от одного устройство к другому и от одной реализации CSS к другой. Это лучше зарезервировать эти блоки для устройств с высоким разрешением и в особенно для печатной продукции. На экранах компьютеров и портативных устройств, вы, вероятно, не получите того, чего ожидаете.

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

CSS не определяет, что означает «высокое разрешение». Но как бюджетный принтеры в настоящее время начинаются с 300 точек на дюйм, а экраны высокого класса — с 200dpi, обрезка, вероятно, находится где-то посередине.

Есть еще одна причина избегать использования абсолютных единиц для других целей. чем печатать: вы смотрите на разные экраны с разного расстояния.1 см на экране рабочего стола выглядит маленьким. Но то же самое на мобильном телефоне прямо перед вашими глазами выглядит большим. Лучше использовать относительные единицы, например em .

Блоки em и ex зависят от шрифт и может быть разным для каждого элемента в документе. В em — это просто размер шрифта. В элементе с 2-дюймовым font, 1em, таким образом, означает 2in. Выражение размеров, таких как поля и paddings, в em означает, что они связаны со шрифтом размер, и если у пользователя большой шрифт (например,г., на большом экране) или мелкий шрифт (например, на портативном устройстве), размеры будут в пропорция. Объявления, такие как text-indent: 1.5em и margin: 1em чрезвычайно распространены в CSS.

Блок ex используется редко. Его цель — выразить размеры, которые должны быть связаны с x-высотой шрифта. В x-height — это, грубо говоря, высота строчных букв, таких как a, c, m, или o. шрифтов одинакового размера (и таким образом, тот же em ) может сильно отличаться по размеру их строчные буквы, и когда важно, чтобы какое-то изображение, е.g., соответствует высоте x, блок ex соответствует доступный.

Блок пикселей — это волшебная единица CSS. Нет связаны с текущим шрифтом и обычно не связаны с физическим сантиметры или дюймы тоже. Определен блок пикселей и пикселей. быть маленьким, но видимым и таким, чтобы горизонтальная линия шириной 1 пиксель может отображаться с резкими краями (без сглаживания). Что такое резкий, мелкий и видимый — зависит от устройства и от того, как оно расположено используется: вы держите его близко к глазам, как мобильный телефон, на длина вытянутой руки, как монитор компьютера, или где-то посередине, как читалка электронных книг? Таким образом, пикселей не определяется как постоянной длины, но как то, что зависит от типа устройство и его типичное использование.

Чтобы составить представление о внешнем виде px , представьте компьютерный монитор с ЭЛТ 1990-х годов: самая маленькая точка, которую он может дисплей измеряет около 1/100 дюйма (0,25 мм) или немного более. Блок пикселей получил свое название от этого экрана. пикселей.

В настоящее время существуют устройства, которые в принципе могут отображать более мелкие острые точки (хотя вам может потребоваться лупа, чтобы увидеть их). Но документы прошлого века, которые использовали пикселей в CSS, по-прежнему выглядят одинаково, независимо от устройства.В частности, принтеры могут отображать четкие линии с гораздо меньшим детали, чем 1px, но даже на принтерах линия в 1px выглядит очень так же, как это выглядело бы на мониторе компьютера. Смена устройств, но пикселей всегда имеет одинаковый внешний вид.

На самом деле, CSS требует, чтобы 1px было точно 1/96 дюйма во всей распечатываемой продукции. CSS считает, что принтеры, в отличие от экранов, не должны иметь разные размеры для пикселей для печати четких линий.В печатных СМИ px, таким образом, не только имеет одинаковый внешний вид с одного устройства на другое, но на самом деле это то же самое.

CSS также определяет, что растровые изображения (например, фотографии) по умолчанию, отображается с отображением одного пикселя изображения на 1 пиксель. Фото с разрешением 600 на 400 пикселей будет 600 пикселей в ширину и 400 пикселей в высоту. В пиксели на фотографии, таким образом, не сопоставляются с пикселями устройства отображения. (который может быть очень маленьким), но сопоставьте пикселей с единицами.Что позволяет точно выровнять изображения по другим элементам документ, если вы используете пикселей единиц в своем стиле лист, а не пт , см и т. д.

Используйте

em или пикселей для размера шрифта .

CSS унаследовал от типографики единицы pt (point) и pc (pica). Принтеры традиционно использовали те и аналогичные агрегаты вместо см или из .В CSS нет причин использовать pt , используйте ту единицу, которая вам больше нравится. Но там это хороший причина использовать ни pt , ни какой-либо другой абсолютный unit и используйте только em и px .

Вот несколько линий разной толщины. Некоторые или все они могут выглядеть резкими, но по крайней мере линии 1px и 2px должны быть резкие и заметные:

0.5pt, 1px, 1pt, 1,5 пикс., 2 пикс.

Если первые четыре строки выглядят одинаково (или если 0.Линия 5pt отсутствует), вы, вероятно, смотрите на монитор компьютера, не может отображать точки меньше 1 пикселя. Если линии появляются увеличения толщины, вы, вероятно, смотрите на эту страницу на качественный компьютерный экран или на бумаге. И если 1pt выглядит толще чем 1.5px, у вас, вероятно, портативный экран.

Волшебная единица CSS, пикселей , часто бывает хорошей единицы измерения, особенно если стиль требует выравнивания текста по изображения, или просто потому, что все, что имеет ширину 1 пиксель или кратное 1px гарантированно будет выглядеть резким.

Но для размеров шрифта еще лучше использовать em . Идея состоит в том, чтобы (1) не устанавливать размер шрифта элемента BODY (в HTML), но используйте размер устройства по умолчанию, потому что это размер, удобный для чтения; и (2) экспресс-шрифт размеры остальных элементов в em : h2 {font-size: 2.5em}, чтобы h2 в 2,5 раза больше обычного, body шрифт.

Единственное место, где вы можете использовать pt (или см или в ) для установки размера шрифта, находится в таблицы стилей для печати, если вам нужно убедиться, что напечатанный шрифт точно определенного размера.Но даже там, используя размер шрифта по умолчанию обычно лучше.

Таким образом, блок пикселей защищает вас от необходимости знать разрешение устройства. Будет ли выход 96 точек на дюйм, 100, 220 или 1800 точек на дюйм, длина, выраженная целым числом пикселей всегда выглядит хорошо и очень похоже на всех устройств. Но что, если вы и хотите узнать разрешение устройства, например, чтобы узнать, безопасно ли использовать 0.Линия 5px ? Ответ — проверить разрешение через Media Queries. Объяснение медиа-запросов выходит за рамки этой статьи, но вот небольшой пример:

div.mybox {border: 2px solid}
@media (минимальное разрешение: 2dppx) {
  / * Медиа с 2 или более точками на пиксель * /
  div.mybox {border: 1.5px solid}
}

Больше единиц в CSS

Чтобы еще проще было писать правила стиля, зависящие только от размер шрифта по умолчанию, CSS с 2013 года имеет новую единицу: rem . rem (от «root em») — это шрифт размер корневого элемента документа. В отличие от em , который может быть разным для каждого элемента, rem постоянен во всем документе. Например, дать P и элементы h2 с одинаковым левым полем, сравните этот стиль до 2013 года. простыня:

 p {margin-left: 1em}
h2 {размер шрифта: 3em; margin-left: 0.333em}

с новой версией:

 p {margin-left: 1rem}
h2 {размер шрифта: 3em; margin-left: 1rem}

Другие новые блоки позволяют указывать размеры относительно окно читателя.Это vw и vh . vw составляет 1/100 ширины окна а vh составляет 1/100 высоты окна. Там также vmin , что означает, какой самый маленький из vw и vh . И vmax . (Вы можете догадаться, что он делает.)

Поскольку они такие новые, они еще не везде работают. Но, как на начало 2015 года их поддерживают несколько браузеров.

Преобразование PX в EM стало проще.

Что такое EM?

Википедия хорошо об этом говорит: «em — это единица измерения в области типографики, равная размеру текущего шрифта». Если ваш размер шрифта составляет 16 пикселей, то 1em = 16px

Для получения дополнительной информации посетите Википедию и Mozilla MDN.

Какая разница в размере текста между PX, EM,%, PT?

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

С другой стороны,

Percent и EM являются относительными величинами. Размер EM или процентной единицы зависит от его родительского элемента. Если размер основного текста составляет 12 пикселей, то размер текста, установленного на 120% или 1,2 EM внутри основного текста, будет 1,2 * 12 или 14,4 пикселей.

Как выполнить преобразование между PX, EM,% и PT?

Предположим, вы не используете PXtoEM.com для простоты, вот формулы, которые использует PXtoEM.com.

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

PX по EM: Формула: размер в пикселях / родительский размер в пикселях; Пример: 12px / 16px = 0,75em
PX в%: Формула: размер в пикселях / родительский размер в пикселях * 100; Пример: 12 пикселей / 16 пикселей * 100 = 75%
PX в PT: Формула: размер в пикселях * (количество точек на дюйм / пикселей на дюйм); Пример: 16 пикселей * (72 пикселей / 96 пикселей) = 12 пикселей
EM в PX
: Формула: размер в EM * размер родительского элемента в пикселях; Пример:.75em * 16px = 12px
EM в%: Формула: размер в EM * 100; Пример: 0,75em * 100 = 75%

Зачем изменять размер текста с помощью EM в CSS?

Таблицы стилей

, использующие EM, легче поддерживать для дизайнера (особенно с PXtoEM.com на вашей стороне) и более доступны для конечных пользователей.

Таблицы стилей

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

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

Для получения дополнительной информации посетите A List Apart, informIT, блог Джона Тана и этот блог SharePoint.

Этот сайт использует Blueprint CSS для создания вашего вкусного CSS.

Что такое PXtoEM.com?

PXtoEM.com — это простое преобразование пикселей в em. Выберите размер основного шрифта в пикселях (px), и вы получите полную таблицу преобразования пикселей (px) в em, что делает гибкий веб-дизайн с помощью CSS несложным. Некогда сложная задача преобразования пикселей (px) в неуловимые em теперь была сведена к писку, поедающему козлят. Спасибо, PXtoEM.com!

PXtoEM.com делает еще один шаг вперед и дает CSS для начала! После того, как вы выберете размер основного шрифта, перейдите в «Получить CSS» и готово!

PXtoEM.com был создан Брайаном Креем

значений и единиц CSS — Изучение веб-разработки

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

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

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

Примечание: Да, типы значений CSS обычно обозначаются с помощью угловых скобок, чтобы отличать их от свойств CSS (например,g., свойство color по сравнению с типом данных ). Вы также можете запутаться между типами данных CSS и элементами HTML, поскольку они оба используют угловые скобки, но это маловероятно — они используются в очень разных контекстах.

В следующем примере мы установили цвет нашего заголовка с помощью ключевого слова, а фон с помощью функции rgb () :

  h2 {
  черный цвет;
  цвет фона: rgb (197,93,161);
}

Тип значения в CSS — это способ определения набора допустимых значений.Это означает, что если вы видите как действительный, вам не нужно задумываться, какой из различных типов значений цвета можно использовать — ключевые слова, шестнадцатеричные значения, rgb (), функций и т. Д. Вы можете использовать любые доступных <цвет> значений, если они поддерживаются вашим браузером. Страница в MDN для каждого значения предоставит вам информацию о поддержке браузером. Например, если вы посмотрите на страницу , вы увидите, что в разделе совместимости браузера перечислены различные типы значений цвета и их поддержка.

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

Существуют различные типы числовых значений, которые вы можете использовать в CSS. Все следующие числа классифицируются как числовые:

Тип данных	Описание
`<целое число>`	`<целое число>` — это целое число, например `1024` или `-55` .
`<номер>`	`<число>` представляет собой десятичное число — может или может не иметь десятичной точки с дробной составляющей. Для Например, `0,255` , `128` или `-1,2` .
`<размер>`	`<размер>` — это `<номер>` с прикрепленный к нему блок.Например, `45deg` , `5s` , или `10px` . `<размер>` — зонт категория, которая включает `<длина>` , `<угол>` , `<время>` и `<разрешение>` типы.
`<процент>`	`<процент>` представляет собой долю некоторого другого ценить.Например, `50%` . Значения в процентах всегда относительно другого количества. Например, длина элемента равна относительно длины его родительского элемента.

Длина

Чаще всего вы встретите числовой тип <длина> . Например, 10px (пикселей) или 30em . В CSS используются два типа длины — относительная и абсолютная. Важно знать разницу, чтобы понять, насколько масштабными станут вещи.

Единицы абсолютной длины

Ниже приведены все абсолютных единиц длины — они не связаны ни с чем другим и обычно считаются всегда одного размера.

Шт.	Имя	Эквивалент
`см`	Сантиметров	1 см = 38 пикселей = 25/64 дюйма
`мм`	Миллиметров	1 мм = 1/10 1 см
`Q`	Четверть миллиметра	1Q = 1/40 1 см
`дюйм`	дюймов	1 дюйм = 2.54 см = 96 пикселей
`шт`	Пика	1 шт. = 1/6 от 1 дюйма
`пт`	Очки	1pt = 1/72 от 1 в
`пикселей`	пикселей	1 пиксель = 1/96 от 1 дюйма

Большинство из этих единиц более удобны при использовании для печати, чем для вывода на экран. Например, мы обычно не используем на экране см (сантиметров).Единственное значение, которое вы обычно будете использовать, — пикселей (пикселей).

Единицы относительной длины

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

Блок	относительно
`выс.`	Размер шрифта родительского элемента в случае типографских свойств, таких как `font-size` , и размер шрифта самого элемента, в случае других свойств как `ширина` .
`пр.`	x-высота шрифта элемента.
`шасси`	Предварительный размер (ширина) глифа «0» шрифта элемента.
`рем`	Размер шрифта корневого элемента.
`слева`	Высота строки элемента.
`VW`	1% ширины области просмотра.
`vh`	1% высоты области просмотра.
`vmin`	1% меньшего размера области просмотра.
`vmax`	1% от большего размера области просмотра.

Изучение примера

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

Ширина второго окна установлена в единицах vw (ширина области просмотра). Это значение относится к ширине области просмотра, поэтому 10vw составляет 10 процентов ширины области просмотра.Если вы измените ширину окна браузера, размер поля должен измениться. Однако этот пример встроен в страницу с использованием </code>, поэтому это не сработает. Чтобы увидеть это в действии, вам нужно будет попробовать этот пример, открыв его на отдельной вкладке браузера.</p><p> В третьем поле используется <code> em </code> единиц. Они относятся к размеру шрифта. Я установил размер шрифта <code> 1em </code> для содержащего <code><div> </code>, который имеет класс <code> .wrapper </code>.Измените это значение на <code> 1.5em </code>, и вы увидите, что размер шрифта всех элементов увеличивается, но только последний элемент станет шире, так как его ширина относительно этого размера шрифта.</p><p> После выполнения приведенных выше инструкций попробуйте поиграть со значениями другими способами, чтобы увидеть, что вы получите.</p><h5><span class="ez-toc-section" id="ems_rem"> ems и rem </span></h5><p> <code> em </code> и <code> rem </code> — две относительные длины, с которыми вы, вероятно, столкнетесь чаще всего при изменении размеров чего-либо, от полей до текста.Стоит понять, как они работают, и в чем разница между ними, особенно когда вы начинаете переходить к более сложным темам, таким как стилизация текста или макет CSS. В приведенном ниже примере представлена демонстрация.</p><p> HTML-код, показанный ниже, представляет собой набор вложенных списков — всего у нас есть три списка, и оба примера имеют один и тот же HTML-код. Единственное отличие состоит в том, что первый имеет класс <em> ems </em>, а второй — класс <em> rem </em>.</p><p> Для начала мы установили размер шрифта 16 пикселей в элементе <code><html> </code>.</p><p> <strong> Напомним, что в случае типографики единица em означает «размер шрифта моего родительского элемента» </strong>. Элементы <code><li> </code> внутри <code><ul> </code> с классом <code> </code> из <code> ems </code> получают размер от своего родителя. Таким образом, каждый последующий уровень вложенности становится все больше и больше, поскольку для каждого из них установлен размер шрифта <code> 1,3em </code> — в 1,3 раза больше размера шрифта его родителя.</p><p> <strong> Напомним, что rem означает «размер шрифта корневого элемента» </strong>.(rem означает «root em».) Элементы <code><li> </code> внутри <code><ul> </code> с классом <code> </code> из <code> rem </code> получают размер от корневого элемента (<code><html> </code>). Это означает, что каждый последующий уровень вложенности не увеличивается.</p><p> Однако, если вы измените размер шрифта <code><html> </code> <code> </code> в CSS, вы увидите, что все остальное изменится относительно него — и <code> rem </code>, и текст размером <code> em </code>.</p><h4><span class="ez-toc-section" id="i-25"> Проценты </span></h4><p> Во многих случаях процентная доля обрабатывается так же, как и длина. Дело в том, что проценты всегда устанавливаются относительно некоторого другого значения. Например, если вы установите для элемента <code> font-size </code> в процентах, это будет процент от <code> font-size </code> родительского элемента. Если вы используете процентное значение для <code> ширины </code>, это будет процент от <code> ширины </code> родительского элемента.</p><p> В приведенном ниже примере два блока с процентным размером и два блока с размером пикселя имеют одинаковые имена классов.Наборы имеют ширину 40% и 200 пикселей соответственно.</p><p> Разница в том, что второй набор из двух блоков находится внутри оболочки шириной 400 пикселей. Второе поле шириной 200 пикселей имеет ту же ширину, что и первое, но второе поле 40% теперь составляет 40% от 400 пикселей — намного уже, чем первое!</p><p> <strong> Попробуйте изменить ширину оболочки или процентное значение, чтобы увидеть, как это работает. </strong></p><p> В следующем примере размер шрифта задан в процентах. Каждые <code><li> </code> имеют размер шрифта <code> </code>, равный 80%; поэтому элементы вложенного списка становятся все меньше по мере того, как они наследуют размер от своего родителя.</p><p> Обратите внимание, что, хотя многие типы значений принимают длину или процентное соотношение, есть некоторые, которые принимают только длину. Вы можете увидеть, какие значения принимаются на справочных страницах свойств MDN. Если допустимое значение включает <code> <длина- процент> </code>, вы можете использовать длину или процент. Если допустимое значение включает только <code> <длина> </code>, использование процента невозможно.</p><h4><span class="ez-toc-section" id="i-26"> Числа </span></h4><p> Некоторые типы значений принимают числа без добавления к ним единиц измерения.Примером свойства, которое принимает безразмерное число, является свойство <code> opacity </code>, которое контролирует непрозрачность элемента (насколько он прозрачен). Это свойство принимает число от <code> 0 </code> (полностью прозрачное) до <code> 1 </code> (полностью непрозрачное).</p><p> <strong> В приведенном ниже примере попробуйте изменить значение <code> непрозрачности </code> на различные десятичные значения от <code> 0 </code> до <code> 1 </code> и посмотрите, как поле и его содержимое становятся более или менее непрозрачными. </strong></p><p> <strong> Примечание: </strong> Когда вы используете число в CSS в качестве значения, его не следует заключать в кавычки.</p><p> Есть много способов указать цвет в CSS, некоторые из которых реализованы позже, чем другие. Одни и те же значения цвета можно использовать везде в CSS, независимо от того, указываете ли вы цвет текста, цвет фона или что-то еще.</p><p> Стандартная система цвета, доступная в современных компьютерах, — 24 бита, что позволяет отображать около 16,7 миллионов различных цветов посредством комбинации различных красных, зеленых и синих каналов с 256 различными значениями на канал (256 x 256 x 256 = 16 777 216.Давайте рассмотрим некоторые способы, которыми мы можем указать цвета в CSS.</p><p> <strong> Примечание: </strong> В этом руководстве мы рассмотрим общие методы указания цвета, которые хорошо поддерживаются браузером; есть и другие, но они не имеют такой хорошей поддержки и встречаются реже.</p><h4><span class="ez-toc-section" id="i-27"> Ключевые слова цвета </span></h4><p> Довольно часто в примерах здесь, в разделе обучения или где-либо еще на MDN, вы увидите используемые ключевые слова цвета, поскольку они представляют собой простой и понятный способ определения цвета.Есть несколько таких ключевых слов, некоторые из которых имеют довольно забавные названия! Вы можете увидеть полный список на странице для типа значения <code> <color> </code>.</p><p> <strong> Попробуйте поиграть с разными значениями цвета в живых примерах ниже, чтобы лучше понять, как они работают. </strong></p><h4><span class="ez-toc-section" id="_RGB-2"> Шестнадцатеричные значения RGB </span></h4><p> Следующий тип значения цвета, с которым вы, вероятно, столкнетесь, — это шестнадцатеричные коды. Каждое шестнадцатеричное значение состоит из символа решетки / фунта (#), за которым следуют шесть шестнадцатеричных чисел, каждое из которых может принимать одно из 16 значений от 0 до f (что соответствует 15) — так <code> 0123456789abcdef </code>.Каждая пара значений представляет один из каналов — красный, зеленый и синий — и позволяет нам указать любое из 256 доступных значений для каждого (16 x 16 = 256).</p><p> Эти значения немного сложнее и труднее для понимания, но они намного более универсальны, чем ключевые слова — вы можете использовать шестнадцатеричные значения для представления любого цвета, который вы хотите использовать в своей цветовой схеме.</p><p> <strong> Опять же, попробуйте изменить значения, чтобы увидеть, как меняются цвета. </strong></p><h4><span class="ez-toc-section" id="_RGB_RGBA"> Значения RGB и RGBA </span></h4><p> Третья схема, о которой мы здесь поговорим, — это RGB.Значение RGB — это функция <code> rgb () </code>, которой заданы три параметра, которые представляют значения красного, зеленого и синего каналов цветов, почти так же, как шестнадцатеричные значения. Разница с RGB заключается в том, что каждый канал представлен не двумя шестнадцатеричными цифрами, а десятичным числом от 0 до 255, что несколько проще для понимания.</p><p> Давайте перепишем наш последний пример, чтобы использовать цвета RGB:</p><p> Вы также можете использовать цвета RGBA — они работают точно так же, как цвета RGB, поэтому вы можете использовать любые значения RGB.Однако есть четвертое значение, которое представляет альфа-канал цвета, который контролирует непрозрачность. Если вы установите это значение на <code> 0 </code>, это сделает цвет полностью прозрачным, тогда как <code> 1 </code> сделает его полностью непрозрачным. Значения между ними дают вам разные уровни прозрачности.</p><p> <strong> Примечание. </strong> Установка альфа-канала для цвета имеет одно ключевое отличие от использования свойства <code> непрозрачности </code>, которое мы рассматривали ранее. Когда вы используете непрозрачность, вы делаете элемент и все внутри него непрозрачными, тогда как использование цветов RGBA делает непрозрачным только цвет, который вы указываете.</p><p> В приведенном ниже примере я добавил фоновое изображение в содержащий блок наших цветных блоков. Затем я установил для полей разные значения непрозрачности — обратите внимание, как фон больше просвечивает, когда значение альфа-канала меньше.</p><p> <strong> В этом примере попробуйте изменить значения альфа-канала, чтобы увидеть, как это влияет на вывод цвета. </strong></p><p> <strong> Примечание: </strong> Начиная с уровня 4 цветов CSS, <code> rgba () </code> является псевдонимом для <code> rgb () </code> и <code> hsla () </code> является псевдонимом для <code> hsl () </code> (см. Ниже).В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково. Так, например, и <code> rgba () </code>, и <code> rgb () </code> принимают цвета со значениями альфа-канала и без них. Попробуйте изменить функции <code> rgba () </code> в приведенном выше примере на <code> rgb () </code> и посмотрите, работают ли цвета! Какой стиль вы используете, зависит от вас, но разделение определений непрозрачного и прозрачного цвета для использования различных функций дает (очень) немного лучшую поддержку браузера и может выступать в качестве визуального индикатора того, где прозрачные цвета определены в вашем коде.</p><h4><span class="ez-toc-section" id="_HSL_HSLA"> Значения HSL и HSLA </span></h4><p> Чуть менее хорошо поддерживается, чем RGB, цветовая модель HSL (не поддерживается в старых версиях IE), которая была реализована после большого интереса со стороны дизайнеров. Вместо значений красного, зеленого и синего цветов функция <code> hsl () </code> принимает значения оттенка, насыщенности и яркости, которые используются для различения 16,7 миллионов цветов, но другим способом:</p><ul><li> <strong> Оттенок </strong>: основной оттенок цвета. Принимает значение от 0 до 360, представляющее углы вокруг цветового круга.</li><li> <strong> Насыщенность </strong>: Насколько насыщен цвет? Принимает значение от 0 до 100%, где 0 — это отсутствие цвета (он будет отображаться как оттенок серого), а 100% — полная насыщенность цвета</li><li> <strong> Lightness </strong>: Насколько светлый или яркий цвет? Принимает значение от 0 до 100%, где 0 означает отсутствие света (он будет полностью черным), а 100% — полный свет (он будет полностью белым)</li></ul><p> Мы можем обновить пример RGB, чтобы использовать цвета HSL следующим образом:</p><p> Так же, как RGB имеет RGBA, HSL имеет эквивалент HSLA, который дает вам такую же возможность указывать альфа-канал.Я продемонстрировал это ниже, изменив свой пример RGBA, чтобы использовать цвета HSLA.</p><p> Вы можете использовать любое из этих значений цвета в своих проектах. Вероятно, что для большинства проектов вы выберете цветовую палитру, а затем будете использовать эти цвета — и выбранный вами метод определения цвета — на протяжении всего проекта. Вы можете смешивать и сопоставлять цветовые модели, однако для единообразия лучше всего, если весь ваш проект будет использовать одну и ту же!</p><p> Тип значения <code> <изображение> </code> используется везде, где изображение является допустимым значением.Это может быть фактический файл изображения, на который указывает функция <code> url () </code>, или градиент.</p><p> В приведенном ниже примере мы продемонстрировали изображение и градиент, используемые в качестве значения для свойства </code> фонового изображения CSS <code>.</p><p> <strong> Примечание: </strong> есть и другие возможные значения для <code> <image> </code>, однако они новее и в настоящее время плохо поддерживаются браузером. Загляните на страницу MDN для типа данных <code> <image> </code>, если вы хотите прочитать о них.</p><p> Тип значения <code> <position> </code> представляет собой набор 2D-координат, используемых для позиционирования элемента, такого как фоновое изображение (через <code> background-position </code>). Он может принимать ключевые слова, такие как <code> верхний </code>, <code> левый </code>, <code> нижний </code>, <code> правый </code> и <code> центральный </code>, чтобы выровнять элементы с определенными границами двухмерного блока, а также длины, которые представляют смещения сверху и слева. стороны коробки.</p><p> Типичное значение позиции состоит из двух значений: первое задает положение по горизонтали, второе - по вертикали.Если вы указываете значения только для одной оси, другая по умолчанию будет <code>, центр </code>.</p><p> В следующем примере мы разместили фоновое изображение на 40 пикселей сверху и справа от контейнера с помощью ключевого слова.</p><p> <strong> Поэкспериментируйте с этими значениями, чтобы увидеть, как можно перемещать изображение. </strong></p><p> В приведенных выше примерах мы видели места, где ключевые слова используются в качестве значения (например, <code> <color> </code> ключевых слов, таких как <code> red </code>, <code> black </code>, <code> rebeccapurple </code> и <code> goldenrod </code>).Эти ключевые слова более точно описываются как идентификаторы <em>, </em>, особое значение, которое понимает CSS. Как таковые, они не цитируются - они не рассматриваются как строки.</p><p> Есть места, где вы используете строки в CSS. Например, при указании сгенерированного контента. В этом случае значение приводится в кавычки, чтобы продемонстрировать, что это строка. В приведенном ниже примере мы используем ключевые слова без кавычек вместе со строкой сгенерированного содержимого в кавычках.</p><p> Последний тип значения, который мы рассмотрим, - это группа значений, известная как функции.В программировании функция - это многократно используемый фрагмент кода, который можно запускать несколько раз для выполнения повторяющейся задачи с минимальными усилиями как со стороны разработчика, так и со стороны компьютера. Функции обычно связаны с такими языками, как JavaScript, Python или C ++, но они существуют и в CSS как значения свойств. Мы уже видели функции в действии в разделе «Цвета» - <code> rgb () </code>, <code> hsl () </code> и т. Д. Значение, используемое для возврата изображения из файла - <code> url () </code> - также является функцией.</p><p> Значение, которое больше похоже на то, что вы можете найти в традиционном языке программирования, - это CSS-функция <code> calc () </code>. Эта функция дает вам возможность выполнять простые вычисления внутри вашего CSS. Это особенно полезно, если вы хотите выработать значения, которые вы не можете определить при написании CSS для вашего проекта, и вам нужен браузер, чтобы работать за вас во время выполнения.</p><p> Например, ниже мы используем <code> calc () </code>, чтобы сделать поле шириной <code> 20% + 100px </code>.20% рассчитываются от ширины родительского контейнера <code> .wrapper </code> и поэтому будут изменены, если эта ширина изменится. Мы не можем выполнить этот расчет заранее, потому что мы не знаем, какими будут 20% родительского элемента, поэтому мы используем <code> calc () </code>, чтобы указать браузеру сделать это за нас.</p><p> В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше - см. Проверка своих навыков: значения и единицы.</p><p> Это был краткий обзор наиболее распространенных типов значений и единиц, с которыми вы можете столкнуться. Вы можете ознакомиться со всеми различными типами на справочной странице значений и единиц CSS; вы столкнетесь со многими из них, когда будете работать над этими уроками.</p><p> Главное помнить, что каждое свойство имеет определенный список допустимых типов значений, и каждый тип значения имеет определение, объясняющее, что это за значения. Затем вы можете найти подробности здесь, в MDN.</p><p> Например, понимание того, что <code> <image> </code> также позволяет создавать цветовой градиент, полезно, но, возможно, иметь неочевидные знания!</p><h2><span class="ez-toc-section" id="css_-_em_px"> css - Почему em вместо px? </span></h2><p> Причина, по которой я задал этот вопрос, заключалась в том, что я забыл, как использовать em, поскольку некоторое время я счастливо взламывал CSS. Люди не заметили, что я оставил вопрос общим, поскольку я не говорил о размерах шрифтов как таковых. Меня больше интересовало, как определить стили для <strong> любого заданного элемента блока </strong> на странице.</p><p> Как указали Хенрик Пол и другие, em пропорционально размеру шрифта, используемому в элементе. Распространенной практикой является определение размеров блочных элементов в пикселях, однако изменение размера шрифтов в браузерах обычно нарушает этот дизайн. Изменение размера шрифтов обычно выполняется с помощью сочетаний клавиш <kbd> Ctrl </kbd> + <kbd> + </kbd> или <kbd> Ctrl </kbd> + <kbd> - </kbd>. Так что хорошей практикой будет использовать вместо них em.</p><h3><span class="ez-toc-section" id="i-28"> Использование пикселей для определения ширины </span></h3><p> Вот наглядный пример.Допустим, у нас есть div-тег, который мы хотим превратить в стильное окно даты, у нас может быть HTML-код, который выглядит так:</p><pre> <code> <div> <p> июль </p> <p> 4 </p> </div> </code> </pre><p> Простая реализация могла бы определить ширину класса <code> окна даты </code> в пикселях:</p><pre> <code> * {маржа: 0; отступ: 0; } p.month {размер шрифта: 10pt; } p.day {размер шрифта: 24pt; font-weight: жирный; } div.date-box { цвет фона: # DD2222; семейство шрифтов: Arial, sans-serif; цвет белый; ширина: 50 пикселей; } </code> </pre><h3><span class="ez-toc-section" id="i-29"> Проблема </span></h3><p> Однако, если мы хотим увеличить размер текста в нашем браузере, дизайн сломается.Текст также будет выливаться за пределы поля, что почти то же самое, что происходит с дизайном SO, как указывает flodin. Это связано с тем, что поле останется того же размера по ширине, поскольку оно заблокировано до <code> 50 пикселей </code>.</p><h3><span class="ez-toc-section" id="_em-2"> Использование em вместо </span></h3><p> Более разумный способ - вместо этого определить ширину в EMS:</p><pre> <code> div.date-box { цвет фона: # DD2222; семейство шрифтов: Arial, sans-serif; цвет белый; ширина: 2,5 мм; } * {маржа: 0; отступ: 0; размер шрифта: 10pt; } // Начальная ширина поля даты = 10 pt x 2.5 см = 25 пт // Также будет работать, если вы использовали px вместо pt </code> </pre><p> Таким образом, у вас будет плавный дизайн на поле даты, то есть размер поля будет увеличиваться вместе с текстом пропорционально размеру шрифта, определенному для поля даты. В этом примере размер шрифта определен в <code> * </code> как 10pt и будет увеличиваться в 2,5 раза по сравнению с этим размером шрифта. Поэтому, когда вы изменяете размер шрифтов в браузере, размер поля в 2,5 раза превышает размер шрифта.</p><h2><span class="ez-toc-section" id="_CSS_em_ch-2"> В чем разница между модулями CSS em и ch? </span></h2><p> Я просмотрел все ответы, а также ваши комментарии к ним, и у меня возникло ощущение, что вы хотите использовать блоки <code> em </code> и <code> ch </code> в основном для свойств <code> width </code> или <code> height </code>.</p><blockquote><p> [...] тогда они не подходят для установки ширины поля?</p></blockquote><p> И с моей точки зрения, я бы не рекомендовал этого.</p><hr/><p> <strong> CH-Unit </strong></p><p> <del> Прежде всего, я никогда раньше не работал с <code> ch </code>, и, честно говоря, я не вижу никакого реального использования для него <em> - может быть, ввод <code> </code> для года, так что всегда есть ширина для четырех чисел, но не более - </em>, потому что он никогда не сообщает вам точно, какой шириной будет конечный элемент.</del></p><p> Я передумал и теперь вижу хорошее реальное применение <code> ch </code>. 🙂</p><p> Пример ввода <code> </code> для года, так что всегда есть ширина для четырех чисел, сохранится. Но <code> ch </code> также очень полезен для правильного определения ширины текста абзаца.</p><p> С пиксельными, относительными или процентными значениями очень сложно - <em> особенно для адаптивного дизайна </em> - установить идеальную ширину текста для каждой строки, включая интервал для абзаца.Однако это может быть помехой для пользовательского опыта на веб-сайте. Абстракция от Atlassian Design идеально сочетается:</p><blockquote><p> Установите среду чтения, подходящую для читателя. Широкие строки текста трудно читать, и людям труднее сосредоточиться. Хотя нет правильного способа измерить идеальную ширину текста, хорошей целью является стремление к тому, чтобы в строке было от 60 до 100 символов, включая интервал. Установка оптимальной длины строки разбивает контент на легко усваиваемые блоки.</p><p> <em> Источник: Atlassian Design </em></p></blockquote><p> Здесь <code> ch </code> можно использовать как единое целое. Для лучшего обзора вы можете посмотреть примеры в конце.</p><p> А теперь наконец определение <code> ch </code>😉</p><p> Как часто говорят, <code> ch </code> относится к ширине символа <code> 0 </code> к его размеру шрифта.</p><p> В качестве примера: тело имеет размер шрифта <code>: 16px </code>, а символ <code> 0 </code> имеет ширину <code> 10px </code> из выбранного семейства шрифтов, тогда <code> 1ch </code> равно <code> 10px </code>.И даже это все еще неточно, потому что, например, <code> курсив </code> или <code> полужирный </code> может изменить ширину символа.</p><hr/><p> <strong> Блоки EM и REM </strong></p><p> Как также часто говорят, <code> em </code> <em> - и чтобы добавить еще одного игрока - </em> также <code> rem </code> относительно <code> font-size </code>.</p><p> Где <code> rem </code> всегда относительно корневого элемента <code> font-size </code>, <code> em </code> относительно <code> font-size </code> собственного элемента или последнего родительского элемента <em> (также может быть корневым элементом) </em> с размер шрифта <code> </code>.</p><p> Как <code> em </code> Пример: только тело <code> </code> имеет размер шрифта <code>: 16 пикселей; </code>, а элемент не получил <code> font-size </code>, тогда <code> 1em </code> равно <code> 16px </code>. Если родительский элемент или сам элемент получил размер шрифта <code>: 20px; </code>, тогда <code> 1em </code> равно <code> 20px </code>. <code> em </code> единиц также могут размножаться сами по себе.</p><p> Как <code> rem </code>, пример: тело <code> </code> имеет размер шрифта <code>: 16 пикселей; </code>, тогда <code> 1rem </code> равно <code> 16px </code>.Даже если сам элемент или родительский элемент получил размер шрифта <code>: 20px; </code>, <code> 1rem </code> по-прежнему равняется настройкам <code> body </code> <code> 16px </code>.</p><blockquote><p> [...] если ch имеет размер 0 в шрифте, почему em не имеет размер M в шрифте [...]</p></blockquote><p> <code> em </code> изначально был основан на типографских размерах текущего символа шрифта <code> M </code>, но он уже устарел. Как вы теперь можете видеть, он всегда ссылается на «фиксированное начальное значение», а не на ширину символа.</p><hr/><p> <strong> Рекомендуемое использование </strong></p><p> Как я уже сказал, с моей точки зрения, я бы не рекомендовал использовать <code> ch </code>, <code> em </code> или <code> rem </code> для свойств <code> width </code> или <code> height </code>. Эти единицы более полезны для «текстовых» свойств.</p><p> Некоторые примеры:</p><ul><li> Все <code> h3 </code> должны быть в четыре раза больше текста: <code> font-size: 4rem; </code></li><li> Все <code> p </code> всегда должны иметь поле <code> </code> в половину строки: <code> margin-bottom: 0.5em; </code></li><li> <code> line-height </code> элементов должен быть на 20% больше, чем <code> font-size </code>: <code> line-height: 1.2em; </code></li><li> Вход <code> </code> для года всегда должен иметь ширину <code> </code> из четырех чисел: <code> ширина: 4 канала; </code></li><li> Ширина текста <code> p </code> всегда должна составлять 80 символов в строке, включая интервал: <code> width: 80ch; </code></li></ul><blockquote><p>, но пиксели не гибкие при работе с разными устройствами</p></blockquote><p> Для этого в качестве заключения я бы посоветовал просто работать с процентами <code> width: 80%; </code> или ширина области просмотра и высота области просмотра <code> height: 100vh; ширина: 100ввт; </code>.Или, по крайней мере, всегда с максимальным значением: <code> width: 1000px; максимальная ширина: 100%; </code>.</p><hr/><p> Вот несколько фрагментов <em> - только для примеров с <code> шириной </code> свойств - </em> для лучшего понимания:</p><p> <strong> <code> em </code> - Относительно размера шрифта собственного элемента или последнего родительского элемента с размером шрифта </strong></p><pre> <code> кузов { размер шрифта: 16 пикселей; } п { font-weight: жирный; } div { ширина: 1em; высота: 50 пикселей; фон: светло-серый; } .em-0-5 { ширина: 0,5 мм; } .em-10 { ширина: 10em; } .fs-10 { размер шрифта: 10 пикселей; } .parent { размер шрифта: 0.5em; } .parent div { ширина: 10em; } </code> </pre><pre> <code> <p> 1em (размер основного шрифта * 1 = 16 пикселей) </p> <div> </div> <p> 0,5em (размер шрифта * 0,5 = 8 пикселей) </p> <div> </div> <p> 10em (размер шрифта * 10 = 160 пикселей) </p> <div> </div> <p> 10em из 10 пикселей собственный размер шрифта элемента (размер шрифта * 10 = 100 пикселей) </p> <div> </div> <p> 10em от 0.5em родительский размер шрифта (размер основного шрифта * размер родительского шрифта * 10 = 80 пикселей) </p> <span> <div> </div> </span> </code> </pre><p> <strong> <code> rem </code> - относительно размера шрифта корневого элемента </strong></p><pre> <code> кузов { размер шрифта: 16 пикселей; } п { font-weight: жирный; } div { ширина: 10бэр; высота: 50 пикселей; фон: светло-серый; } .parent { размер шрифта: 20 пикселей; } .parent div { ширина: 5бэр; } </code> </pre><pre> <code> <p> 10rem (размер основного шрифта * 10 = 160 пикселей) </p> <div> </div> <p> 5rem в родительском элементе с размером шрифта 20 пикселей (размер шрифта тела * 5 = 80 пикселей) </p> <span> <div> </div> </span> </code> </pre><p> <strong> <code> ch </code> - относительно ширины «0» (нуля) </strong></p><pre> <code> кузов { размер шрифта: 16 пикселей; } п { font-weight: жирный; } Вход { ширина: 4ч; } div { ширина: 20ч; фон: светло-серый; перенос слов: слово-разрыв; } .ch-1 { ширина: 1ч; } .ch-5 { ширина: 5ч; размер шрифта: 32 пикселя; } </code> </pre><pre> <code> <p> 4 канала (интервал из 4 нулевых символов) </p> <input type = "text" value = "2018" /> <p> 20 каналов (интервал из 20 нулевых символов) </p> <div> 0000000000000000000000000 </div> <p> Также 20 каналов (интервал из 20 нулевых символов) </p> <div> Lorem ipsum dolor sit amet, conctetuer adipiscing elit. Aeneanmodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et </div> <p> 1 канал (пробел из 1x нулевого символа) </p> <div> 00000 </div> <p> 5ch от font-size 32px (пространство для 5x нулевых символов с размером шрифта 32px) </p> <div> 0000000000000000000000000 </div> </code> </pre><h2><span class="ez-toc-section" id="_CSS-6"> Сила единиц измерения в CSS </span></h2><p> Для каждой сложной функции в CSS у вас всегда будет поворотный момент, когда вы увидите, насколько действительно мощная функция.И, хотите верьте, хотите нет, мой личный поворотный момент с ems наступил спустя много времени после того, как я написал введение в тему, наполненное каламбуром.</p><p> Хотя к тому моменту я довольно хорошо понял ems, я действительно начал понимать, насколько они мощны, когда прочитал сообщение Симурая о Medium под названием Sizing (Web) components.</p><p> Итак, я собираюсь осмотреть его фалды в этом посте. Здесь вы найдете краткое введение в единицы измерения em, а затем живую демонстрацию техники, которую он описывает.</p><h3><span class="ez-toc-section" id="_EMS"> Что такое EMS? </span></h3><p> В CSS единица em равна вычисленному <code> font-size </code> для элемента, к которому применяется em.Когда единицы em объявляются для дочерних элементов, для которых не определен размер шрифта <code> </code>, они унаследуют свой размер шрифта <code> </code> от своего родителя или от другого элемента-предка, возможно, вплоть до корневого элемента. на документе.</p><p> Посмотрите на следующий CSS:</p><pre> <code> .example { размер шрифта: 20 пикселей; } </code> </pre><p> В этом случае 1em для этого элемента или его дочерних элементов (при условии отсутствия других определений <code> font-size </code>) будет равно 20px.Итак, если мы добавим строку:</p><pre> <code> .example { размер шрифта: 20 пикселей; радиус границы: .5em; } </code> </pre><p> Это значение <code> border-radius </code>, равное <code> .5em </code>, вычисляется как 10 пикселей (т.е. 20 * .5). Аналогично:</p><pre> <code> .example { размер шрифта: 20 пикселей; радиус границы: .5em; отступ: 2em; } </code> </pre><p> Значение заполнения <code> 2em </code> равно 40px (20 * 2). Как уже упоминалось, этот тип вычисления будет применяться также к любым дочерним элементам - если любой из этих дочерних элементов не имеет явно определенного значения <code> font-size </code>, и в этом случае значение em будет рассчитываться на основе этого.Если нигде в CSS размер шрифта не определен, em-единица будет равна размеру шрифта по умолчанию для документа в браузере, который обычно составляет 16 пикселей.</p><p> Я думаю, это должно прояснить, как работает EMS. Теперь давайте посмотрим, как эту технику можно использовать для создания легко изменяемых размеров веб-компонентов, как это обсуждалось Симураем в исходной статье Medium. Я сделаю еще один шаг вперед, предоставив демонстрацию, чтобы увидеть, как это работает.</p><h3><span class="ez-toc-section" id="i-30"> Определение размеров на уровне компонентов </span></h3><p> Понятие «компоненты» сейчас довольно популярно.Он хорошо работает с модульными методами CSS, а также с идеей инкапсулированных частей кода в целом. И я полагаю, что следующий метод будет еще более интересным, когда спецификация веб-компонентов получит широкую поддержку.</p><p> Этот метод в основном работает следующим образом: свойство <code> font-size </code> используется, как его называет Симурай, как «троянский конь», создавая базовый блок для различных элементов внутри нашего компонента или модуля. Поскольку единицы em, как описано выше, вычисляются на основе определяемого корнем <code> font-size </code> в родительском элементе, это позволяет легко изменять размер всего компонента, просто изменяя размер шрифта <code> </code> в родительском элементе.</p><p> Давайте посмотрим на это в действии в демонстрации CodePen:</p><p data-height="600" data-theme-id="5083" data-slug-hash="BtJFn" data-default-tab="result"> См. Pen Использование ems для компонентов с изменяемым размером с помощью SitePoint (@SitePoint) на CodePen.</p><p> Этот глупый маленький модуль состоит из четырех основных элементов. Ничего особенного, просто пример для иллюстрации этой техники. <strong> Переместите ползунок диапазона вверху демонстрационной страницы </strong>, чтобы изменить размер модуля. Вы также можете протестировать его в полноэкранном режиме. Ползунок диапазона привязан к единственному значению корневого элемента для компонента: значение <code> font-size </code>.</p><p> Здесь следует отметить, что цель сделать компонент изменяемого размера с помощью этого единственного свойства CSS не обязательно, чтобы пользователь мог это сделать. В основном это делается для того, чтобы разработчик, обслуживающий модуль, мог быстро вносить изменения, не возясь с различными значениями во всех частях компонента.</p><p> Как описано в предыдущем разделе, по мере изменения размера шрифта он распространяется на все значения em, установленные для этого родительского элемента, а также для всех его дочерних элементов, делая все части компонента пропорционально гибкими.</p><p> Если вы изучите CSS, вы заметите следующее:</p><ul><li> Все внутри компонента имеет размер ems, за исключением внешней границы (которую мы хотим всегда оставлять на 2 пикселя) и изображения, размер которого я мог бы изменить, если бы захотел, но я доволен его размером статичен для этого случая.</li><li> Каплевидный элемент в правом верхнем углу - это псевдоэлемент, который также использует базовый размер шрифта <code> </code> на родительском элементе.</li><li> CSS также включает два медиа-запроса, которые регулируют размер шрифта <code> </code> для родительского элемента.Опять же, это показывает полезность этого метода, потому что вам не нужно изменять все различные размеры в медиа-запросах, а только <code> font-size </code>.</li></ul><h3><span class="ez-toc-section" id="i-31"> Некоторые примечания, недостатки и т. Д. </span></h3><p> Как видно из использования ползунка диапазона в демонстрации, этот тип гибкого изменения размера не всегда то, что вам нужно. Это может несколько ограничивать.</p><p> Возможно, вам придется настроить некоторые значения em, чтобы получить их так, как вам нравится, и, как и в случае с родительской границей в демонстрации, вы можете не захотеть, чтобы возможность изменения размера применялась ко всем элементам.Вы можете легко преодолеть это, просто избегая em на тех элементах, которые вы хотите исключить.</p><p> Как описано в обсуждении исходной статьи Симурая, вам не нужно использовать единицы пикселя, чтобы установить размер шрифта <code> для корня </code>. Вы также можете использовать ems для этого, но просто помните, что он будет унаследован таким же образом от своего родителя, возможно, исходя из значения документа по умолчанию для <code> font-size </code>.</p><h3><span class="ez-toc-section" id="_Rems_Sass"> А как насчет Rems и Sass? </span></h3><p> Единица rem в CSS всегда наследует свое значение из настройки базового размера шрифта в корневом элементе документа, независимо от вычисленного размера шрифта.В HTML корневым элементом всегда является элемент <code> html </code>. Таким образом, вы можете использовать rems, но это будет означать, что вам придется управлять всеми компонентами на странице, используя размер шрифта для этого элемента. Он может работать в определенных проектах, но я думаю, что этот метод лучше всего работает, когда изменение размера сосредоточено на изолированном компоненте, а не на всем документе.</p><p> Что касается использования препроцессора, такого как Sass, я думаю, что это побочный момент. В конечном итоге ваша скомпилированная таблица стилей будет использовать любые единицы, которые вы используете в своем коде Sass, и наследование будет работать таким же образом.</p><h3><span class="ez-toc-section" id="i-32"> Заключение </span></h3><p> Как уже упоминалось, Симурай заслуживает похвалы за то, что сделал эту технику более известной. Конечно, как он упоминает, в этом нет ничего нового, и основная концепция использовалась многими опытными разработчиками в течение многих лет, но, возможно, не столько в контексте веб-компонентов или модулей.</p><p> Как говорит Симурай, я думаю, что это хороший метод для использования при построении CSS-фреймворка или библиотеки компонентов, и, как минимум, я думаю, что этот метод действительно помогает понять, насколько мощны em-единицы.</p><p> Если у вас есть отзывы или опыт использования подобной техники, или у вас есть идеи, как эту концепцию можно улучшить, я буду рад услышать ваши комментарии.<div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></article></div><div class="author_box"><div class="row clearfix"><div class="col-md-3 col-sm-3 col-xs-12"><div class="author_thumb"> <img alt='' src="//pcvector.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=300&d=mm&r=g' srcset="" data-srcset='https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=600&d=mm&r=g 2x' class='lazy lazy-hidden avatar avatar-300 photo' height='300' width='300' fetchpriority='high' decoding='async'/><noscript><img alt='' src='https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=300&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=600&d=mm&r=g 2x' class='avatar avatar-300 photo' height='300' width='300' fetchpriority='high' decoding='async'/></noscript></div></div><div class="col-md-9 col-sm-9 col-xs-12"><div class="author_details"><div class="author_name"><h3>alexxlab</h3></div><div class="author_desc"></div></div></div></div></div><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://pcvector.ru/raznoe/shariki-narisovannye-kartinki-d0-b2-d0-be-d0-b7-d0-b4-d1-83-d1-88-d0-bd-d1-8b-d0-b5-d1-88-d0-b0-d1-80-d1-8b-d0-bd-d0-b0-d1-80-d0-b8-d1-81-d0-be-d0-b2-d0-b0-d0-bd-d0-bd-d1-8b-d0-b5-kartinki-stokovye.html" rel="prev">Пред.</a></div><div class="nav-next"><a href="https://pcvector.ru/raznoe/czvety-uzory-i-ornamenty-izobrazheniya-czvetochnye-ornamenty-besplatnye-vektory-stokovye-foto-i-psd.html" rel="next">След.</a></div></div></nav><section class="cm_related_post_container"><div class="section_inner"><div class="row clearfix"><div class="col-md-6 col-sm-6 col-xs-12"><div class="card"><div class="post_thumb imghover"></div><div class="card_content"><div class="entry_cats"><ul class="post-categories"><li><a href="https://pcvector.ru/category/raznoe" rel="category tag">Разное</a></li></ul></div><div class="post_title"><h2><a href="https://pcvector.ru/raznoe/kak-chasto-mozhno-delat-klizmu-grudnichku-rekomendatsii-pediatrov.html">Как часто можно делать клизму грудничку: рекомендации педиатров</a></h2></div><div class="meta"><ul class="post_meta"><li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author/alexxlab">alexxlab</a></li><li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/raznoe/kak-chasto-mozhno-delat-klizmu-grudnichku-rekomendatsii-pediatrov.html" rel="bookmark"><time class="entry-date published" datetime="2024-11-22T11:43:50+03:00">22.11.2024</time></a></li><li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/raznoe/kak-chasto-mozhno-delat-klizmu-grudnichku-rekomendatsii-pediatrov.html">0</a></li></ul></div></div></div></div><div class="col-md-6 col-sm-6 col-xs-12"><div class="card"><div class="post_thumb imghover"></div><div class="card_content"><div class="entry_cats"><ul class="post-categories"><li><a href="https://pcvector.ru/category/raznoe" rel="category tag">Разное</a></li></ul></div><div class="post_title"><h2><a href="https://pcvector.ru/raznoe/pochemu-novorozhdennyj-ne-spit-nochyu-11-glavnyh-prichin-i-sposoby-resheniya-problemy.html">Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы</a></h2></div><div class="meta"><ul class="post_meta"><li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author/alexxlab">alexxlab</a></li><li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/raznoe/pochemu-novorozhdennyj-ne-spit-nochyu-11-glavnyh-prichin-i-sposoby-resheniya-problemy.html" rel="bookmark"><time class="entry-date published" datetime="2024-11-19T12:43:50+03:00">19.11.2024</time></a></li><li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/raznoe/pochemu-novorozhdennyj-ne-spit-nochyu-11-glavnyh-prichin-i-sposoby-resheniya-problemy.html">0</a></li></ul></div></div></div></div><div class="row clearfix visible-sm visible-md visible-lg"></div><div class="col-md-6 col-sm-6 col-xs-12"><div class="card"><div class="post_thumb imghover"></div><div class="card_content"><div class="entry_cats"><ul class="post-categories"><li><a href="https://pcvector.ru/category/raznoe" rel="category tag">Разное</a></li></ul></div><div class="post_title"><h2><a href="https://pcvector.ru/raznoe/kak-uspokoit-plachushhego-rebenka-10-effektivnyh-sposobov.html">Как успокоить плачущего ребенка: 10 эффективных способов</a></h2></div><div class="meta"><ul class="post_meta"><li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author/alexxlab">alexxlab</a></li><li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/raznoe/kak-uspokoit-plachushhego-rebenka-10-effektivnyh-sposobov.html" rel="bookmark"><time class="entry-date published" datetime="2024-11-16T23:43:50+03:00">16.11.2024</time></a></li><li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/raznoe/kak-uspokoit-plachushhego-rebenka-10-effektivnyh-sposobov.html">0</a></li></ul></div></div></div></div><div class="col-md-6 col-sm-6 col-xs-12"><div class="card"><div class="post_thumb imghover"></div><div class="card_content"><div class="entry_cats"><ul class="post-categories"><li><a href="https://pcvector.ru/category/raznoe" rel="category tag">Разное</a></li></ul></div><div class="post_title"><h2><a href="https://pcvector.ru/raznoe/chto-nuzhno-novorozhdennomu-na-pervoe-vremya-polnyj-spisok-neobhodimyh-veshhej.html">Что нужно новорожденному на первое время: полный список необходимых вещей</a></h2></div><div class="meta"><ul class="post_meta"><li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author/alexxlab">alexxlab</a></li><li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/raznoe/chto-nuzhno-novorozhdennomu-na-pervoe-vremya-polnyj-spisok-neobhodimyh-veshhej.html" rel="bookmark"><time class="entry-date published" datetime="2024-11-14T16:43:50+03:00">14.11.2024</time></a></li><li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/raznoe/chto-nuzhno-novorozhdennomu-na-pervoe-vremya-polnyj-spisok-neobhodimyh-veshhej.html">0</a></li></ul></div></div></div></div><div class="row clearfix visible-sm visible-md visible-lg"></div><div class="col-md-6 col-sm-6 col-xs-12"><div class="card"><div class="post_thumb imghover"></div><div class="card_content"><div class="entry_cats"><ul class="post-categories"><li><a href="https://pcvector.ru/category/raznoe" rel="category tag">Разное</a></li></ul></div><div class="post_title"><h2><a href="https://pcvector.ru/raznoe/pelenki-dlya-novorozhdennyh-vidy-razmery-i-sposoby-ispolzovaniya.html">Пеленки для новорожденных: виды, размеры и способы использования</a></h2></div><div class="meta"><ul class="post_meta"><li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author/alexxlab">alexxlab</a></li><li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/raznoe/pelenki-dlya-novorozhdennyh-vidy-razmery-i-sposoby-ispolzovaniya.html" rel="bookmark"><time class="entry-date published" datetime="2024-11-13T20:43:50+03:00">13.11.2024</time></a></li><li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/raznoe/pelenki-dlya-novorozhdennyh-vidy-razmery-i-sposoby-ispolzovaniya.html">0</a></li></ul></div></div></div></div><div class="col-md-6 col-sm-6 col-xs-12"><div class="card"><div class="post_thumb imghover"></div><div class="card_content"><div class="entry_cats"><ul class="post-categories"><li><a href="https://pcvector.ru/category/raznoe" rel="category tag">Разное</a></li></ul></div><div class="post_title"><h2><a href="https://pcvector.ru/raznoe/detskaya-krovatka-dlya-novorozhdennogo-kak-pravilno-vybrat.html">Детская кроватка для новорожденного: как правильно выбрать</a></h2></div><div class="meta"><ul class="post_meta"><li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author/alexxlab">alexxlab</a></li><li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/raznoe/detskaya-krovatka-dlya-novorozhdennogo-kak-pravilno-vybrat.html" rel="bookmark"><time class="entry-date published" datetime="2024-11-10T08:43:50+03:00">10.11.2024</time></a></li><li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/raznoe/detskaya-krovatka-dlya-novorozhdennogo-kak-pravilno-vybrat.html">0</a></li></ul></div></div></div></div></div></div></section><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/css-v-em-px-em-rem-i-drugie.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://pcvector.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='19989' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></div><div class="col-md-4 col-sm-12 col-xs-12 sticky_portion"><aside id="secondary" class="sidebar-widget-area"><div id="search-2" class="widget widget_search"><form role="search" method="get" id="search-form" class="clearfix" action="https://pcvector.ru/"><input type="search" name="s" placeholder="Поиск..." value"" ><input type="submit" id="submit" value="Поиск"></form></div><div id="archives-3" class="widget widget_archive"><div class="widget-title"><h2>Архивы</h2></div><ul><li><a href='https://pcvector.ru/2024/11'>Ноябрь 2024</a></li><li><a href='https://pcvector.ru/2024/10'>Октябрь 2024</a></li><li><a href='https://pcvector.ru/2021/11'>Ноябрь 2021</a></li><li><a href='https://pcvector.ru/2021/10'>Октябрь 2021</a></li><li><a href='https://pcvector.ru/2021/09'>Сентябрь 2021</a></li><li><a href='https://pcvector.ru/2021/08'>Август 2021</a></li><li><a href='https://pcvector.ru/2021/07'>Июль 2021</a></li><li><a href='https://pcvector.ru/2021/06'>Июнь 2021</a></li><li><a href='https://pcvector.ru/2021/05'>Май 2021</a></li><li><a href='https://pcvector.ru/2021/04'>Апрель 2021</a></li><li><a href='https://pcvector.ru/2021/03'>Март 2021</a></li><li><a href='https://pcvector.ru/2021/02'>Февраль 2021</a></li><li><a href='https://pcvector.ru/2021/01'>Январь 2021</a></li><li><a href='https://pcvector.ru/2020/12'>Декабрь 2020</a></li><li><a href='https://pcvector.ru/2020/11'>Ноябрь 2020</a></li><li><a href='https://pcvector.ru/2020/10'>Октябрь 2020</a></li><li><a href='https://pcvector.ru/2020/09'>Сентябрь 2020</a></li><li><a href='https://pcvector.ru/2020/08'>Август 2020</a></li><li><a href='https://pcvector.ru/2020/07'>Июль 2020</a></li><li><a href='https://pcvector.ru/2020/06'>Июнь 2020</a></li><li><a href='https://pcvector.ru/2020/05'>Май 2020</a></li><li><a href='https://pcvector.ru/2020/04'>Апрель 2020</a></li><li><a href='https://pcvector.ru/2020/03'>Март 2020</a></li><li><a href='https://pcvector.ru/2020/02'>Февраль 2020</a></li><li><a href='https://pcvector.ru/2020/01'>Январь 2020</a></li><li><a href='https://pcvector.ru/2019/12'>Декабрь 2019</a></li><li><a href='https://pcvector.ru/2019/11'>Ноябрь 2019</a></li><li><a href='https://pcvector.ru/2019/10'>Октябрь 2019</a></li><li><a href='https://pcvector.ru/2019/09'>Сентябрь 2019</a></li><li><a href='https://pcvector.ru/2019/08'>Август 2019</a></li><li><a href='https://pcvector.ru/2019/07'>Июль 2019</a></li><li><a href='https://pcvector.ru/2019/06'>Июнь 2019</a></li><li><a href='https://pcvector.ru/2019/05'>Май 2019</a></li><li><a href='https://pcvector.ru/2019/04'>Апрель 2019</a></li><li><a href='https://pcvector.ru/2019/03'>Март 2019</a></li><li><a href='https://pcvector.ru/2019/02'>Февраль 2019</a></li><li><a href='https://pcvector.ru/2019/01'>Январь 2019</a></li><li><a href='https://pcvector.ru/2018/12'>Декабрь 2018</a></li><li><a href='https://pcvector.ru/2018/11'>Ноябрь 2018</a></li><li><a href='https://pcvector.ru/2018/10'>Октябрь 2018</a></li><li><a href='https://pcvector.ru/2018/09'>Сентябрь 2018</a></li><li><a href='https://pcvector.ru/2018/08'>Август 2018</a></li><li><a href='https://pcvector.ru/2018/07'>Июль 2018</a></li><li><a href='https://pcvector.ru/2018/06'>Июнь 2018</a></li><li><a href='https://pcvector.ru/2018/05'>Май 2018</a></li><li><a href='https://pcvector.ru/2018/04'>Апрель 2018</a></li><li><a href='https://pcvector.ru/2018/03'>Март 2018</a></li><li><a href='https://pcvector.ru/2018/02'>Февраль 2018</a></li><li><a href='https://pcvector.ru/2018/01'>Январь 2018</a></li><li><a href='https://pcvector.ru/1988/02'>Февраль 1988</a></li><li><a href='https://pcvector.ru/1988/01'>Январь 1988</a></li><li><a href='https://pcvector.ru/1987/12'>Декабрь 1987</a></li><li><a href='https://pcvector.ru/1987/11'>Ноябрь 1987</a></li><li><a href='https://pcvector.ru/1987/10'>Октябрь 1987</a></li><li><a href='https://pcvector.ru/1987/09'>Сентябрь 1987</a></li><li><a href='https://pcvector.ru/1987/08'>Август 1987</a></li><li><a href='https://pcvector.ru/1987/07'>Июль 1987</a></li><li><a href='https://pcvector.ru/1987/06'>Июнь 1987</a></li><li><a href='https://pcvector.ru/1987/05'>Май 1987</a></li><li><a href='https://pcvector.ru/1987/04'>Апрель 1987</a></li><li><a href='https://pcvector.ru/1987/03'>Март 1987</a></li><li><a href='https://pcvector.ru/1987/02'>Февраль 1987</a></li><li><a href='https://pcvector.ru/1987/01'>Январь 1987</a></li><li><a href='https://pcvector.ru/1986/12'>Декабрь 1986</a></li><li><a href='https://pcvector.ru/1986/11'>Ноябрь 1986</a></li><li><a href='https://pcvector.ru/1986/10'>Октябрь 1986</a></li><li><a href='https://pcvector.ru/1986/09'>Сентябрь 1986</a></li><li><a href='https://pcvector.ru/1986/08'>Август 1986</a></li><li><a href='https://pcvector.ru/1986/07'>Июль 1986</a></li><li><a href='https://pcvector.ru/1986/06'>Июнь 1986</a></li><li><a href='https://pcvector.ru/1986/05'>Май 1986</a></li><li><a href='https://pcvector.ru/1986/04'>Апрель 1986</a></li><li><a href='https://pcvector.ru/1986/03'>Март 1986</a></li><li><a href='https://pcvector.ru/1986/02'>Февраль 1986</a></li><li><a href='https://pcvector.ru/1986/01'>Январь 1986</a></li><li><a href='https://pcvector.ru/1985/12'>Декабрь 1985</a></li><li><a href='https://pcvector.ru/1985/11'>Ноябрь 1985</a></li><li><a href='https://pcvector.ru/1985/10'>Октябрь 1985</a></li><li><a href='https://pcvector.ru/1985/09'>Сентябрь 1985</a></li><li><a href='https://pcvector.ru/1985/08'>Август 1985</a></li><li><a href='https://pcvector.ru/1985/07'>Июль 1985</a></li><li><a href='https://pcvector.ru/1985/06'>Июнь 1985</a></li><li><a href='https://pcvector.ru/1985/05'>Май 1985</a></li><li><a href='https://pcvector.ru/1985/04'>Апрель 1985</a></li><li><a href='https://pcvector.ru/1985/03'>Март 1985</a></li><li><a href='https://pcvector.ru/1985/02'>Февраль 1985</a></li><li><a href='https://pcvector.ru/1985/01'>Январь 1985</a></li><li><a href='https://pcvector.ru/1984/12'>Декабрь 1984</a></li><li><a href='https://pcvector.ru/1984/11'>Ноябрь 1984</a></li><li><a href='https://pcvector.ru/1984/10'>Октябрь 1984</a></li><li><a href='https://pcvector.ru/1984/09'>Сентябрь 1984</a></li><li><a href='https://pcvector.ru/1984/08'>Август 1984</a></li><li><a href='https://pcvector.ru/1984/07'>Июль 1984</a></li><li><a href='https://pcvector.ru/1984/06'>Июнь 1984</a></li><li><a href='https://pcvector.ru/1984/05'>Май 1984</a></li><li><a href='https://pcvector.ru/1984/04'>Апрель 1984</a></li><li><a href='https://pcvector.ru/1984/03'>Март 1984</a></li><li><a href='https://pcvector.ru/1982/06'>Июнь 1982</a></li><li><a href='https://pcvector.ru/1982/05'>Май 1982</a></li><li><a href='https://pcvector.ru/1982/04'>Апрель 1982</a></li><li><a href='https://pcvector.ru/1982/03'>Март 1982</a></li><li><a href='https://pcvector.ru/1982/02'>Февраль 1982</a></li><li><a href='https://pcvector.ru/1982/01'>Январь 1982</a></li><li><a href='https://pcvector.ru/1981/12'>Декабрь 1981</a></li><li><a href='https://pcvector.ru/1981/11'>Ноябрь 1981</a></li><li><a href='https://pcvector.ru/1981/10'>Октябрь 1981</a></li><li><a href='https://pcvector.ru/1981/09'>Сентябрь 1981</a></li><li><a href='https://pcvector.ru/1981/08'>Август 1981</a></li><li><a href='https://pcvector.ru/1981/07'>Июль 1981</a></li><li><a href='https://pcvector.ru/1981/06'>Июнь 1981</a></li><li><a href='https://pcvector.ru/1981/05'>Май 1981</a></li><li><a href='https://pcvector.ru/1981/04'>Апрель 1981</a></li><li><a href='https://pcvector.ru/1981/03'>Март 1981</a></li><li><a href='https://pcvector.ru/1981/02'>Февраль 1981</a></li><li><a href='https://pcvector.ru/1981/01'>Январь 1981</a></li><li><a href='https://pcvector.ru/1980/12'>Декабрь 1980</a></li><li><a href='https://pcvector.ru/1980/11'>Ноябрь 1980</a></li><li><a href='https://pcvector.ru/1980/10'>Октябрь 1980</a></li><li><a href='https://pcvector.ru/1980/09'>Сентябрь 1980</a></li><li><a href='https://pcvector.ru/1980/08'>Август 1980</a></li><li><a href='https://pcvector.ru/1980/07'>Июль 1980</a></li><li><a href='https://pcvector.ru/1980/06'>Июнь 1980</a></li><li><a href='https://pcvector.ru/1980/05'>Май 1980</a></li><li><a href='https://pcvector.ru/1980/04'>Апрель 1980</a></li><li><a href='https://pcvector.ru/1980/03'>Март 1980</a></li><li><a href='https://pcvector.ru/1980/02'>Февраль 1980</a></li><li><a href='https://pcvector.ru/1980/01'>Январь 1980</a></li><li><a href='https://pcvector.ru/1979/12'>Декабрь 1979</a></li><li><a href='https://pcvector.ru/1979/11'>Ноябрь 1979</a></li><li><a href='https://pcvector.ru/1979/10'>Октябрь 1979</a></li><li><a href='https://pcvector.ru/1979/09'>Сентябрь 1979</a></li><li><a href='https://pcvector.ru/1979/08'>Август 1979</a></li><li><a href='https://pcvector.ru/1979/07'>Июль 1979</a></li><li><a href='https://pcvector.ru/1979/06'>Июнь 1979</a></li><li><a href='https://pcvector.ru/1979/05'>Май 1979</a></li><li><a href='https://pcvector.ru/1979/04'>Апрель 1979</a></li><li><a href='https://pcvector.ru/1979/03'>Март 1979</a></li><li><a href='https://pcvector.ru/1979/02'>Февраль 1979</a></li><li><a href='https://pcvector.ru/1979/01'>Январь 1979</a></li><li><a href='https://pcvector.ru/1978/12'>Декабрь 1978</a></li><li><a href='https://pcvector.ru/1978/11'>Ноябрь 1978</a></li><li><a href='https://pcvector.ru/1978/10'>Октябрь 1978</a></li><li><a href='https://pcvector.ru/1978/09'>Сентябрь 1978</a></li><li><a href='https://pcvector.ru/1978/08'>Август 1978</a></li><li><a href='https://pcvector.ru/1978/07'>Июль 1978</a></li><li><a href='https://pcvector.ru/1978/06'>Июнь 1978</a></li><li><a href='https://pcvector.ru/1978/05'>Май 1978</a></li><li><a href='https://pcvector.ru/1978/04'>Апрель 1978</a></li><li><a href='https://pcvector.ru/1978/03'>Март 1978</a></li><li><a href='https://pcvector.ru/1978/02'>Февраль 1978</a></li><li><a href='https://pcvector.ru/1978/01'>Январь 1978</a></li><li><a href='https://pcvector.ru/1977/12'>Декабрь 1977</a></li><li><a href='https://pcvector.ru/1977/11'>Ноябрь 1977</a></li><li><a href='https://pcvector.ru/1977/10'>Октябрь 1977</a></li><li><a href='https://pcvector.ru/1977/09'>Сентябрь 1977</a></li><li><a href='https://pcvector.ru/1977/08'>Август 1977</a></li><li><a href='https://pcvector.ru/1977/07'>Июль 1977</a></li><li><a href='https://pcvector.ru/1977/06'>Июнь 1977</a></li><li><a href='https://pcvector.ru/1977/05'>Май 1977</a></li><li><a href='https://pcvector.ru/1977/04'>Апрель 1977</a></li><li><a href='https://pcvector.ru/1977/03'>Март 1977</a></li><li><a href='https://pcvector.ru/1977/02'>Февраль 1977</a></li><li><a href='https://pcvector.ru/1977/01'>Январь 1977</a></li><li><a href='https://pcvector.ru/1976/12'>Декабрь 1976</a></li><li><a href='https://pcvector.ru/1976/11'>Ноябрь 1976</a></li><li><a href='https://pcvector.ru/1976/10'>Октябрь 1976</a></li><li><a href='https://pcvector.ru/1976/09'>Сентябрь 1976</a></li><li><a href='https://pcvector.ru/1976/08'>Август 1976</a></li><li><a href='https://pcvector.ru/1976/07'>Июль 1976</a></li><li><a href='https://pcvector.ru/1976/06'>Июнь 1976</a></li><li><a href='https://pcvector.ru/1976/05'>Май 1976</a></li><li><a href='https://pcvector.ru/1976/04'>Апрель 1976</a></li><li><a href='https://pcvector.ru/1976/03'>Март 1976</a></li><li><a href='https://pcvector.ru/1976/02'>Февраль 1976</a></li><li><a href='https://pcvector.ru/1976/01'>Январь 1976</a></li><li><a href='https://pcvector.ru/1975/12'>Декабрь 1975</a></li><li><a href='https://pcvector.ru/1975/11'>Ноябрь 1975</a></li><li><a href='https://pcvector.ru/1975/10'>Октябрь 1975</a></li><li><a href='https://pcvector.ru/1975/09'>Сентябрь 1975</a></li><li><a href='https://pcvector.ru/1975/08'>Август 1975</a></li><li><a href='https://pcvector.ru/1975/07'>Июль 1975</a></li><li><a href='https://pcvector.ru/1975/06'>Июнь 1975</a></li><li><a href='https://pcvector.ru/1975/05'>Май 1975</a></li><li><a href='https://pcvector.ru/1975/04'>Апрель 1975</a></li><li><a href='https://pcvector.ru/1975/03'>Март 1975</a></li><li><a href='https://pcvector.ru/1975/02'>Февраль 1975</a></li><li><a href='https://pcvector.ru/1975/01'>Январь 1975</a></li><li><a href='https://pcvector.ru/1974/12'>Декабрь 1974</a></li><li><a href='https://pcvector.ru/1974/11'>Ноябрь 1974</a></li><li><a href='https://pcvector.ru/1974/10'>Октябрь 1974</a></li><li><a href='https://pcvector.ru/1974/09'>Сентябрь 1974</a></li><li><a href='https://pcvector.ru/1974/08'>Август 1974</a></li><li><a href='https://pcvector.ru/1974/07'>Июль 1974</a></li><li><a href='https://pcvector.ru/1974/06'>Июнь 1974</a></li><li><a href='https://pcvector.ru/1974/05'>Май 1974</a></li><li><a href='https://pcvector.ru/1974/04'>Апрель 1974</a></li><li><a href='https://pcvector.ru/1974/03'>Март 1974</a></li><li><a href='https://pcvector.ru/1974/02'>Февраль 1974</a></li><li><a href='https://pcvector.ru/1974/01'>Январь 1974</a></li><li><a href='https://pcvector.ru/1973/12'>Декабрь 1973</a></li><li><a href='https://pcvector.ru/1973/11'>Ноябрь 1973</a></li><li><a href='https://pcvector.ru/1973/10'>Октябрь 1973</a></li><li><a href='https://pcvector.ru/1973/09'>Сентябрь 1973</a></li><li><a href='https://pcvector.ru/1973/08'>Август 1973</a></li><li><a href='https://pcvector.ru/1973/07'>Июль 1973</a></li><li><a href='https://pcvector.ru/1973/06'>Июнь 1973</a></li><li><a href='https://pcvector.ru/1973/05'>Май 1973</a></li><li><a href='https://pcvector.ru/1973/04'>Апрель 1973</a></li><li><a href='https://pcvector.ru/1973/03'>Март 1973</a></li><li><a href='https://pcvector.ru/1973/02'>Февраль 1973</a></li><li><a href='https://pcvector.ru/1973/01'>Январь 1973</a></li><li><a href='https://pcvector.ru/1972/12'>Декабрь 1972</a></li><li><a href='https://pcvector.ru/1972/11'>Ноябрь 1972</a></li><li><a href='https://pcvector.ru/1972/10'>Октябрь 1972</a></li><li><a href='https://pcvector.ru/1972/09'>Сентябрь 1972</a></li><li><a href='https://pcvector.ru/1972/08'>Август 1972</a></li><li><a href='https://pcvector.ru/1972/07'>Июль 1972</a></li><li><a href='https://pcvector.ru/1972/06'>Июнь 1972</a></li><li><a href='https://pcvector.ru/1972/05'>Май 1972</a></li><li><a href='https://pcvector.ru/1972/04'>Апрель 1972</a></li><li><a href='https://pcvector.ru/1972/03'>Март 1972</a></li><li><a href='https://pcvector.ru/1972/02'>Февраль 1972</a></li><li><a href='https://pcvector.ru/1972/01'>Январь 1972</a></li><li><a href='https://pcvector.ru/1971/12'>Декабрь 1971</a></li><li><a href='https://pcvector.ru/1971/11'>Ноябрь 1971</a></li><li><a href='https://pcvector.ru/1971/10'>Октябрь 1971</a></li><li><a href='https://pcvector.ru/1971/09'>Сентябрь 1971</a></li><li><a href='https://pcvector.ru/1971/08'>Август 1971</a></li><li><a href='https://pcvector.ru/1971/07'>Июль 1971</a></li><li><a href='https://pcvector.ru/1971/06'>Июнь 1971</a></li><li><a href='https://pcvector.ru/1971/05'>Май 1971</a></li><li><a href='https://pcvector.ru/1971/04'>Апрель 1971</a></li><li><a href='https://pcvector.ru/1971/03'>Март 1971</a></li><li><a href='https://pcvector.ru/1971/02'>Февраль 1971</a></li><li><a href='https://pcvector.ru/1971/01'>Январь 1971</a></li><li><a href='https://pcvector.ru/1970/12'>Декабрь 1970</a></li><li><a href='https://pcvector.ru/1970/11'>Ноябрь 1970</a></li><li><a href='https://pcvector.ru/1970/10'>Октябрь 1970</a></li><li><a href='https://pcvector.ru/1970/09'>Сентябрь 1970</a></li><li><a href='https://pcvector.ru/1970/08'>Август 1970</a></li><li><a href='https://pcvector.ru/1970/07'>Июль 1970</a></li><li><a href='https://pcvector.ru/1970/06'>Июнь 1970</a></li><li><a href='https://pcvector.ru/1970/05'>Май 1970</a></li><li><a href='https://pcvector.ru/1970/04'>Апрель 1970</a></li><li><a href='https://pcvector.ru/1970/03'>Март 1970</a></li><li><a href='https://pcvector.ru/1970/02'>Февраль 1970</a></li><li><a href='https://pcvector.ru/1970/01'>Январь 1970</a></li></ul></div><div id="categories-3" class="widget widget_categories"><div class="widget-title"><h2>Рубрики</h2></div><ul><li class="cat-item cat-item-9"><a href="https://pcvector.ru/category/vdohnovenie">Вдохновение</a></li><li class="cat-item cat-item-3"><a href="https://pcvector.ru/category/dizajn">Дизайн</a></li><li class="cat-item cat-item-6"><a href="https://pcvector.ru/category/illyustrator">Иллюстратор</a></li><li class="cat-item cat-item-8"><a href="https://pcvector.ru/category/plaginy">Плагины</a></li><li class="cat-item cat-item-5"><a href="https://pcvector.ru/category/raznoe">Разное</a></li><li class="cat-item cat-item-1"><a href="https://pcvector.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-7"><a href="https://pcvector.ru/category/uroki">Уроки</a></li><li class="cat-item cat-item-4"><a href="https://pcvector.ru/category/fotoshop">Фотошоп</a></li></ul></div></aside></div></div></div></div></main></div></div></div><footer class="footer"><div class="footer_inner"><div class="cm-container"><div class="row footer-widget-container"></div><div class="copyright_section"><div class="row"><div class="col-md-7 col-sm-6 col-xs-12"><div class="copyrights"><p>Primelens.ru © 2019</p></div></div><div class="col-md-5 col-sm-6 col-xs-12"><div class="footer_nav"></div></div></div></div></div></div></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://pcvector.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script>  <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script>  <script defer src="https://pcvector.ru/wp-content/cache/autoptimize/js/autoptimize_e9d87f353fb157e2bec37e097d147da9.js"></script></body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="6a74448067cbbc15af205f32-|49" defer></script>