rem css что это

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

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

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

Что такое Px

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

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

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

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

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

Путаница между em и rem

Вложенные элементы

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

Комбинированный пример

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

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

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

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

Заключение

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

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

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

Источник

Значения свойств CSS

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

Что такое значение CSS?

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 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() :

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

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

Числа, длины и проценты

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

Длины

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

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

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

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

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

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

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

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

em и rem

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

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

Проценты

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

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

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

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

Числа

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

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

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

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

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

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

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

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

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

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

RGB и RGBA значения

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

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

Внимание: Настройка альфа канала в цвете имеет одно ключевое различие в использовании свойства 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.

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:

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!

Images

The 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.

Position

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.

Strings and identifiers

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.

Functions

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.

Summary

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 also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!

Источник

rem в CSS. Общие сведения и способы применения

Дата публикации: 2015-11-09

От автора: сегодня мы рассмотрим еще один тип единиц измерения rem в css. Данный тип отлично поддерживается браузерами и полифиллами в случае со старыми обозревателями.

Описание

Единицы измерения rem в CSS что это? Если вы любитель музыки, то должно быть сталкивались с группой «REM». Но в отличие от своих коллег «Rapid Eye Movement» наш rem расшифровывается, как «root em». Данный тип единиц измерения создан для гармонии и баланса с дизайном. Определение одной единицы rem на W3C:

Равная вычисленному значению свойства font-size для основного текста. Если свойство font-size установлено для основного текста, то rem единицы связываются с этим свойством.

Это значит, что 1rem равен размеру текста для тега html (в большинстве браузеров по умолчанию это 16px).

Rem против Em

Основная загвоздка с em в том, что они определяются по размеру текста конкретного элемента. Кроме того, они наследуются, что приводит к непредсказуемым последствиям. Рассмотрим следующий пример. Списки будут иметь шрифт 12px, а основной текст 16px:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Если наш список вложен в другой список, размер шрифта внутреннего будет составлять 75% от родителя, т.е. 9px. Можно исправить это так:

Это решает проблему, однако не стоит забывать о более глубоком наследовании. С rem все намного проще:

Так как все размеры шрифтов определяются по корневому тексту, нам не нужно следить за всевозможными случаями вложенности.

Размер текста в Rem

Jonathan Snook в своей статье Размер текста в Rem в мае 2011 г. был одним из первопроходцев в применении данных единиц измерения к шрифтам. Как и множество других CSS разработчиков, он столкнулся с проблемой с em единицами в сложных макетах.

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

Основная проблема rem для шрифтов в том, что данные единицы довольно сложно применить. Ниже я составил краткий список основных размеров шрифтов в rem единицах, при условии, что по умолчанию стоит 16px:

Как видно, данные значение неудобны при вычислениях. По этой причине Snook использовали трюк под названием «62,5%». Это старый трюк, его уже применяли с em единицами:

Так как rem связаны с корневым текстом, то вариант от Snook выглядит так:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

С виду данное решение может показаться идеальным, однако есть разработчики, которые остерегают от бездумного использования данного подхода. Harry Roberts написал свою статью по поводу применения rem единиц. По его мнению, хоть правило 62,5% и облегчает вычисления, в итоге оно заставляет разработчиков переписывать абсолютно все размеры шрифтов на их сайте.

Третий способ подсказал Chris Coyier на сайте CSS-Tricks. Он использует все три типа единиц измерения. Корневой текст он оставляет в px, модули в rem, а элементы модулей в em. Данный подход облегчает манипулирование размерами основного текста. На основе корневого текста вычисляется размер модулей, а по размеру модулей вычисляется размер шрифта для текста в модулях. Louis Lazaris обсуждала этот последний способ в статье Мощь em единиц измерения в CSS. В примере ниже можно увидеть, как работает последний способ:

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

Rem и медиа запросы

Использование em или rem в медиа запросах сводится к понятию «оптимальная длинна строки», и как она влияет на пользователей. В 2014 году веб-сайт Smashing Magazine опубликовал статью с комплексным исследованием типографики под названием Размер имеет значение: оптимальная длинна строки и размер шрифта в адаптивном веб-дизайне. В статье много интересного, в том числе была вычислена оптимальная длина строки: от 45 до 75-85 символов (включая пробелы и знаки препинания). Идеальное значение строки – 65 символов.

При грубом округлении 1rem = 1 символ, можно манипулировать текстом в одной колонке для мобильных устройств:

Есть одна интересная деталь при использовании rem и em в медиа запросах: все они имеют одно значение 1rem = 1em = размер браузера по умолчанию. Объяснение можно найти в спецификации media query:

«Относительные единицы измерения в медиа запросах основаны на значении браузера по умолчанию. К примеру, в HTML em вычисляется по размеру шрифта font-size, который задан юзер агентом или настройками браузера, а не стилями страницы.»

Сперва создадим span, в нем будем писать ширину экрана: Document width: px.

Создадим два медиа запроса: один для rem, другой для em (Для простоты используем Sass):

Добавим чуть-чуть JQuery для отображения размера экрана, обновляем значение при изменении размера окна:

Сначала мы показали, что правило 62,5% не работает для шрифтов в медиа запросах. При изменении ширины окна браузера, мы видим, как первый медиа запрос перестает работать на 320px (20x16px), а второй начинает на 480px (30x16px). Размер шрифта не меняется, на объявленные нами в стилях при изменении размера окна. Единственный способ это изменить в настройках браузера.

По этой причине не имеет значения, используем мы em или rem в медиа запросах. В таких проектах, как Foundation v5 и Bootstrap v4 alpha в медиа запросах используются em единицы.

Использование rem для масштабирования документов

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

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

Во втором примере мы делаем то же самое но с помощью JS. В этом примере пользователю предоставлена возможность настройки размера интерфейса. Напишите метод для сбора данных о размерах экранов пользователей (хранить можно в БД, куки или на съемном носителе), и вы будете знать о предпочтениях ваших пользователей.

Заключение

Заканчиваем наш урок по rem в CSS. Нет нужды объяснять все преимущества данных единиц измерения: адаптивность, масштабируемость, удобство при чтении и большая гибкость. Однако rem не панацея. При правильном применении они могут решить множество проблем, которые раздражали разработчиков много лет. Каждый из нас может создать свой подход. Открывайте текстовые редакторы, экспериментируйте и делитесь результатами в комментариях.

Автор: Adrian Sandu

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Источник

Доводы в пользу применения rem в CSS

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

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

Перевод статьи «Secrets to using rem in CSS: CSS Tips».

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

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

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

rem или em?

Разница между единицами в том, что единицы rem в качестве базы всегда используют значение корневого элемента ( html ), а em — значение своего контейнера (родительского элемента).

Что такое значение корневого элемента?

Базовый размер шрифта по умолчанию устанавливается браузером. При этом в большинстве браузеров 1 rem = 16 px. Это означает, что вы даже можете использовать стандартизированную 8-пиксельную сетку, поскольку 0,5 rem = 8 пикселей.

Fluid-элементы

Используя единицы rem и позволяя браузеру (и пользователю) управлять базовым значением, вы создаете масштабируемые элементы, сохраняющие свою форму при увеличении или уменьшении размера.

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

А как насчет пикселей?

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

Источник