Использование только px (пикселей) для CSS-размеров шрифта, контейнеров, отступов, позиционирования и пр. – путь простой, но тупиковый.
Что такое rem?
rem (как и em ) относительная единица измерения. em может быть немного сложным в использовании, поэтому часто лучше придерживаться rem . Вот как rem работает:
- rem – это единица измерения, относительно размеров корневого элемента («r» в rem означает: root).
- Допустим, браузер считает базовый размер шрифта 16px . Этот размер указан для корневого элемента (он же элемент html )
Таким образом, если нужно, чтобы какой-то размер был эквивалентен 14px , достаточно посчитать его отношение к базовому размеру: 14/16 = 0.875rem .
Почему rem?
Относительные единицы предпочтительнее пикселей, потому что они учитывают предпочтения пользователя и настройки его браузера. Браузер позволяет пользователю изменить размер шрифта по умолчанию. Это значение применяется к размеру шрифта по умолчанию для корневого элемента. Поскольку rem вычисляется относительно размера основного шрифта, то размеры, указанные в rem будут пропорционально масштабироваться.
«Путин войдет в историю как единица измерения стратегических ошибок и идиотизма» / M.News World
Таким образом, rem можно использовать практически для всех случаев. Например, для: font-size , margin , padding , min-width и т.д.
Есть ли у rem какие-либо недостатки?
Но настоящий недостаток, это неинформативность дробных относительных значений и необходимость их пересчета, чтобы осознать размер в привычных пикселях. Например, при просмотре кода не очевидно, что min-width: 18.75rem это – 300px из макета. Немного поправить эту проблему можно, реализуя в препроцессоре функцию, которая будет выполнять вычисления и поможет прояснить, что происходит. В SCSS это может быть так:
Когда использовать px?
Чем реже – тем лучше. Пиксели следует использовать, когда размеры являются декоративными и/или не нуждаются в масштабировании относительно, предпочитаемого пользователем, размера шрифта. Отличный вариант использования px – границы (border). Чаще всего нет необходимости масштабировать их относительно размеров шрифта.
Как насчет %, fr, flex-grow?
Контейнерные элементы – это те, которые содержат контент. Это прямоугольники, которые содержат текст, изображения и другие элементы контейнера. Они обычно нуждаются в указании размеров и расположения. Размеры контейнерных элементов следует указывать с использованием относительных значений: проценты, fr (для CSS grid) или flex-grow (для flexbox). Это гарантирует, что элемент контейнера будет изменять свои размеры относительно размеров окна браузера.
При настройке размеров элемента с использованием относительных значений можно указать, что они не будут меньше, какого-либо значения. В этом случае можно указывать минимальные размеры с помощью rem .
.row < display: flex; >/* 4 column layout */ .column < min-width: 18.75rem; /* 300px */ width: 25%; >
Когда единицы измерения можно не указывать?
Из всего сказанного до сих пор, есть одно исключение: line-height (высота строки).
CSS EM REM и прочие единицы измерения CSS. Что когда использовать? Подробное объяснение на практике.
Лучше определять значение line-height относительно размера шрифта элемента font-size . Сделать это можно полным отсутствием единиц измерения. Например, если нужно, чтобы font-size составлял 14 пикселей, а line-height 20 пикселей, посчитать можно так:
- font-size – это значение в пикселях, которое делим на размер корневого шрифта (= 14/16)
- line-height будет равен желаемому значению в пикселях, деленному на размер шрифта в пикселях = 20/14
.small < font-size: 0.875rem; /* 14px / 16px */ line-height: 1.4285714286; /* 20px / 14px */ >
Источник: xhtml.ru
Единицы измерения CSS для font-size: px, %, em, rem, vw, vh, vmin, vmax
Всем привет! Меня зовут Анна Блок, и сегодня мы поговорим про единицы измерения в CSS. Наверняка, многие из вас знают о таких единицах измерения, как px и %. Однако, по мимо всего прочего, мы разберем, как работают rem, em, vh, vw, vmax и vmin.
Cтатья получится большой, поэтому разобьем её на две части. Здесь мы поговорим о том, как эти единицы измерения влияют на размер шрифта, т.е на font-size. Во второй части затронем тему, насколько удобно использовать такие единицы измерения для того что бы управлять свойствами padding, margin, height, width и border-radius.
Специально для вас я создала интерактивную шпаргалку, где наглядно отображены основные единицы измерения. Вы можете менять значения по мере прочтения статьи, чтобы материал лучше усваивался.
Pixels
Давайте начнем с самого распространенного — px (c англ. pixels). Пиксель — это базовая, абсолютная и окончательная единица измерения. Пиксель в CSS — это то, что вы видите на экране. Именно он задает значение разрешению монитора. Все значения браузер при веб-разработке пересчитывает в пиксели.
Итак, давайте разберем разметку, которая у нас есть в интерактивной форме. Например, в первом блоке, есть класс box-px за счет которого мы и будем стилизовать текст, который находится внутри.
Pixels
font-size:16px
font-size:8px
font-size:32px
Обратите внимание, основные классы дублируются. На всю основную стилизацию влияет класс, который стоит после box . Например, если просмотреть код CSS, то можно увидеть стилизацию .box-px .text-1 .
.box-px .text-1
В примере мы видим значение font-size:16px , то есть то, что написано в классе text-n , то и дублируется в CSS. Это сделано для наглядности. Вы должны понимать, что большинство браузеров по умолчанию имеют значение font-size: 16px . Если убрать свойство .box-px .text-1 , то визуально ничего не изменится. При этом если мы вернем свойство назад, то тоже ничего не изменится, потому что это значение заложено по умолчанию в браузере. Однако, все что мы стилизуем далее — видоизменяется:
.box-px .text-2 < font-size:8px; >.box-px .text-3
Если мы используем значение меньше 16px, то наш текст уменьшается. И наоборот: если мы будем использовать значение больше, то текст увеличится. Звучит логично, не так ли? Но как работают другие единицы изменения? Давайте разбираться дальше.
Percent
Следующее значение, которое мы рассмотрим это проценты (%). Вы же помните, что браузер по умолчанию использует значение 16px? Это значит, что все относительные единицы, которые мы будем использовать в дальнейшем тоже будут преобразовываться в проценты. Но мы этого с вами не увидим, т.к. эти процессы будут проходить внутри браузера.
Значение процентов высчитывается относительно значения свойства родительского тега. Это значит, что если текст будет вложенным, то его значение будет меняться в зависимости от того тега, в который он вложен. Давайте рассмотрим это наглядно. Напишем, тег p , внутри которого будет находиться тег span ,и внутри которого разместим еще один span
Lorem LoremLorem
Для тега p добавим следующее:
Если бы мы были браузерами, то высчитали значение font-size: 16px . Далее переходим к span . Стилизуем его:
p>span
Такие разные и такие одинаковые кВ, кВт, кВтч. Пишите правильно!
Признаюсь, статейку эту я взялся писать и по зову сердца, и по “письмам читателей”. В очередной раз прочитав в СМИ и на информационном портале фразы “реконструкция линии 110 кВт” , “я потребляю в месяц 175 киловатт”, или еще более неудачную “область потребила за неделю 500 тысяч кВт/ч” в моем воспитанном в школе и в универе энергетическом сознании возник не то чтобы “когнитивный диссонанс”, а самый настоящий гнев и негодование. Но поскольку гнев — плохая реакция на происходящее, она не решит проблему: даже если ерничать и оскорблять журналистов в совокупности, они по отдельности умнее не станут.
Поэтому предлагаю сесть в удобную позу (лотоса, кактуса, кому какJ) и, вдохнув глубоко, прочитать этот жесточайший дзэн-энерголикбез! ))
Заблуждение первое: “Линия 110 кВт” . Пример запроса Яндекса:
Если правильно прочитать это выражение, то получается, что это линия электропередач мощностью 110 киловатт. Если сравнить с выражением “линия мощностью 100 тысяч лошадиных сил”, звучит абсурдно? “Но ведь лошадиные силы. ” – промелькнуло у каждого читателя. Да! Это тоже внесистемная единица измерения мощности, но в отношении линии звучит она довольно абсурдно.
Теперь ближе к теме: каким же все-таки параметром характеризуется линия? Наверное, каким-то относительно стабильным и все же выделяющим ее среди “собратьев”. Линии электропередач характеризуются разными параметрами. Так вот в основу определяющего параметра лег уровень напряжения (класс напряжения), который способны выдержать изоляторы этой линии!
Поэтому линии электропередач различают по номинальным напряжениям. В приведенном мною примере — это 110 киловольт (кВ). При этом по линии с напряжением 110 кВ может передаваться и 0 киловатт (кВт) и десятки тысяч киловатт мощности , все зависит от тока, который по ней идет.
Тем не менее стоит отметить, что некоторые элементы энергоситем и сетей характеризуюся величиной мощности. Это генераторы и трансформаторы. Таким образом, сказать в отношении генератора, что он, “генератор 1000 кВт”, — это вполне приемлимо, ибо именно величина мощности для него имеет определяющее значение.
Для трансформаторов , как для “элементов-посредников” между тем же генератором и линией (или между линиями электропередая), применимо указание его номинальной мощности, и уровней напряжений, которые он трансформирует. Например, фраза “трансформатор 110/10 кВ” означает, что этот трансформатор умеет делать из 110 тысяч вольт 10 тысяч вольт, причем в обоих направлениях. А не так, как говорилось в известном анекдоте: “Трансформатор получает 220 отдает 127, на остальные гудит”. Следует добавить, что мощность трансформатора измеряют не в киловаттах (кВт), а в киловольт-амперах (кВА), это тоже единица мощности в энергетике. Но об этом отдельная большая история, в которой я расскажу про “треугольник мощностей”!
Заблуждение второе: “ У меня счетчик накрутил 215 кВт/ч”
Такие вопросы гуглу тоже задают не стесняясь
Определение ответа на вопрос дано на картинке запроса из Гугла, но я немного разверну его. Тут надо малость вспомнить математику и дроби. Если мы ошибочно сделаем запись о потребленной энергии в виде 100 кВт/ч, то это будет означать, что чем больше у нас киловатт мощности имеет нагрузка (чайник, утюг), то энергии потребляться будет больше (киловатты в числителе).
А вот чем больше часов ваш чайник в N киловатт будет потреблять энергии, тем меньше энергии счетчик накрутит (часы находятся в знаменателе и уменьшают величину дроби). Но это же не так. – в очередной раз промелькнуло в голове читателя: чем больше времени включен чайник, тем больше киловатт-часов накручивает счетчик! Да, все верно, поэтому и записывается правильно единица измерения электроэнергии как кВт*ч , т.е. мощность, умноженная на время= электрическая энергия.
В дополнение к вышесказанному стоит отметить, что к употреблению на кухне фразы «у меня счетчик накрутил 120 киловатт, а у Гали 320 киловатт» еще можно отнестись с снисхождением. Ибо это бытовое выражение «счетчик накрутил 120 киловатт» подразумевает «счетчик отсчитал 120 киловатт-часов». Но употребление данных «кухонных» выражений в СМИ — совсем не комильфо. Если, конечно, СМИ не опустилось до уровня коммуналковской кухни.
За сим свой краткий энерголикбез оканчиваю и сажусь за следующий! Желаю вам энергоэффективных киловатт-часов!
Источник: dzen.ru