Html rem: Единицы измерения | htmlbook.ru

Похожие вопросы:

Хорошо, во-первых, да, я прочитал много-много статей ( Должен ли я использовать единицы измерения px или rem в моем CSS? ) и форумов об этом. Я знаю, что 1px — это не физический пиксель , а скорее…

Я создаю новое веб-приложение с foundation 5.x и заметил, что все, похоже, основано на rem. Раньше я изменял отступы/поля с помощью px,но мне кажется, что создание темы с фундаментом может быть…

Когда мы используем em/rem, разве мы не даем браузеру дополнительную работу с точки зрения изменения значений em/rem на px во время рендеринга, что может быть не очень хорошей практикой, поскольку…

Есть ли какие-либо доказательства того, что конкретная единица калибровки занимает больше времени для обработки? Например, если бы вы использовали rem для определения размера всего вашего сайта,…

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

Сегодня я поиграл с использованием em’s/rem’s на новом сайте, и у меня есть несколько вещей, которые я хотел бы обсудить/спросить Здесь. В течение многих лет я был полностью пиксельным человеком с…

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

Я хотел бы знать, почему Boostrap выбирает rem и em вместо px для новой версии Boostrap 4 . Мы можем посмотреть здесь Некоторые примеры переменных: $font-size-h2: 2.5rem !default; $font-size-h3:…

Когда я должен использовать rem поверх px? Я вижу много статей, в которых говорится, что я должен использовать REM, чтобы уважать предпочтения пользователя, но примеры всегда говорят о размере. ..

У меня есть следующий скрипт, который преобразует px в em: perl -p -i -e ‘s/(\d+)px/($1\/16).em/ge’ stylesheet.css Однако, когда я настраиваю его, чтобы преобразовать em в px, он не работает хорошо:…

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

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

1. IE не может настроить размер шрифта, который использует пиксель как единицу измерения;

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

3. 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 особенности

1. Значение em не фиксировано;

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

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

1. Селектор тела объявляет размер шрифта = 62,5%;

2. Разделите исходное значение в пикселях на 10 и замените его на em в качестве единицы;

3. Пересчитайте значения 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 или оба.

Конвертер px в rem

Базовый размер шрифта px

Введите известное значение в соответствующем поле:

Таблица значений rem для 16px

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

Теория

px (пиксель) — это единица измерения размеров для экранов (мониторов). Используется для максимально конкретного и точного задания размеров.

rem – задаёт размер относительно размера шрифта заданного для тега <html>, используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются в rem.

  Чтобы размер шрифта масштабировался для устройств с разным расширением экрана, в css через медиа-запросы задают базовый размер шрифта для тега <html> для разных размеров экранов. Пример:

html {
    font-size: 16px;
}

@media (max-width: 576px) {
    html {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 992px) {
    html {
        font-size: 15px;
    }
}

  ***Данные размеры для свойства font-size не являются рекомендуемыми. Они просто взяты как пример. Размер напрямую зависит от используемого шрифта и его особенностей. При этом сами значения для font-size не обезательно должны быть целыми числами, а могут быть десятичными дробями: font-size: 15.7575px, что очень часто практекуется в различный css-фреймворках.

Формула для перевода из px в rem

Для перевода значений из пикселей в rem применяется следующая формула:

rem = \dfrac{px}{\text{База}}

• rem — значение в rem
• px — значение в пикселях
• База — базовый размер шрифта

Похожие калькуляторы:

Понимание и использование rem Units в CSS

Модули CSS были предметом нескольких статей здесь на SitePoint (например, «Взгляд на единицы длины в CSS» , «Новые единицы измерения относительного размера шрифта CSS3» и «Сила элементов em в CSS» ). В этой статье мы увеличиваем количество, подробно рассматривая единицы rem , которые имеют отличную поддержку браузера и полифилл, если вам нужна поддержка старого IE.

Эта статья была обновлена ​​в декабре 2019 года, чтобы отразить текущее состояние определения размера блоков rem с помощью CSS. Подробнее о свойствах шрифта и текста CSS читайте в нашей книге CSS Master, 2nd Edition .

Что такое Rem Units?

Возможно, вы встречали термин «REM» раньше, когда слушали радио или музыкальный проигрыватель. В отличие от их музыкальных аналогов, названных по имени «Быстрое движение глаз» во время глубокого сна, в CSS rem означает «root em». Они не заставят вас потерять вашу религию или поверить в человека на луне. Они могут помочь вам достичь гармоничного и сбалансированного дизайна.

В соответствии со спецификацией W3C определение для одного модуля rem:

Равен вычисленному значению font-size При указании в свойстве font-size

Это означает, что 1remhtml

Рем Юниты против Эм Юнитов

Основная проблема с модулями em заключается в том, что они связаны с размером шрифта их собственного элемента. Как таковые они могут каскадироваться и вызывать неожиданные результаты. Давайте рассмотрим следующий пример, где мы хотим, чтобы списки имели размер шрифта 12px16px

 html {
font-size: 100%;
}

ul {
font-size: 0.75em;
}

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

 ul ul {
font-size: 1em;
}

Это делает свое дело, однако мы все еще должны уделять много внимания ситуациям, когда вложение становится еще глубже.

С блоками rem все проще:

 html {
font-size: 100%;
}

ul {
font-size: 0.75rem;
}

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

Определение размера шрифта с помощью модулей Rem

Одним из пионеров использования rem-модулей для определения размера шрифта является Джонатан Снук (Jonathan Snook) со своей статьей « Изменение размера шрифта с помощью REM», опубликованной еще в мае 2011 года. Как и многим другим разработчикам CSS, ему пришлось столкнуться с проблемами, возникающими в сложных макетах модулей.

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

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

• 10 пикселей = 0,625 мм
• 12px = 0,75rem
• 14px = 0.875rem
• 16px = 1рем (базовый)
• 18px = 1.125rem
• 20 пикселей = 1,25 мм
• 24 пикс. = 1,5 мм
• 30px = 1.875rem
• 32px = 2rem

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

 body { font-size:62.5%; } 
h2 { font-size: 2.4em; } 
p { font-size: 1.4em; } 
li { font-size: 1.4em; } 

Поскольку единицы измерения rem относятся к корневому элементу, вариант решения Snook:

 html { font-size: 62.5%; } 
body { font-size: 1.4rem; } 
h2 { font-size: 2.4rem; } 

Также нужно было учитывать другие браузеры, которые не поддерживали rem. Таким образом, код сверху на самом деле был бы написан так:

 html {
font-size: 62.5%;
}

body {
font-size: 14px;
font-size: 1.4rem;
}

h2 {
font-size: 24px;
font-size: 2.4rem;
}

Хотя это решение кажется близким к статусу «золотого правила», есть люди, которые советуют не использовать его ослепительно. Гарри Робертс пишет свой взгляд на использование бэков . По его мнению, хотя решение на 62,5% облегчает вычисления (поскольку размеры шрифта в px

Третье мнение исходит от Криса Койера из CSS-Tricks. Его решение использует все три устройства, с которыми мы столкнулись до сих пор. Он сохраняет размер корня, определенный в px Этот подход облегчает манипулирование глобальным размером, который масштабирует тип в модулях, в то время как содержимое модуля масштабируется на основе самого размера шрифта модуля. Луи Лазарис обсуждал эту последнюю концепцию в «Силах их единиц в CSS» .

В приведенном ниже примере вы можете увидеть, как будет выглядеть подход Криса:

На практике существуют основные структуры, такие как Bootstrap 4 и руководящие принципы проектирования материалов , в которых используются единицы измерения rem для определения размера текстового содержимого.

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

Другой недавний проект Every Layout очень вдохновенно объединяет единицы em и rem. Он ближе всего подходит к схеме модели Криса Койера ранее и использует единицы em для выделения встроенных элементов, таких как значки SVG, промежутки или другие подобные элементы.

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

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

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

 . container {
width: 100%;
}

@media (min-width: 85rem) {
.container {
width: 65rem;
}
}

Однако есть одна интересная деталь о единицах rem и em при использовании в качестве единиц для медиазапросов: они всегда сохраняют одно и то же значение 1rem = 1em = размер шрифта, установленный браузером. Причина такого поведения объясняется в спецификации медиа-запроса (выделение добавлено):

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

Давайте посмотрим быстрый пример такого поведения:

Посмотреть демонстрацию медиа-запросов на CodePen

Во-первых, в нашем HTML у нас есть элемент <span>

 Document width: <span></span>px

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

 html {
font-size: 62.5%; 

@media (min-width: 20rem) {

background-color: lemonchiffon;
font-size: 200%;

}

@media (min-width: 30em) {

background-color: lightblue;
font-size: 300%; 
}
}

Наконец, мы используем немного jQuery для отображения ширины области просмотра на странице, обновляя значение при изменении размера окна:

 $('span').text($(window).width());

$(window).on('resize', function(e) {
$('span').text($(window).width());
});

Мы начнем с трюка с 62,5%, чтобы показать, что измененный размер корневого шрифта не влияет на значения, используемые для медиазапросов. Изменяя ширину окна браузера, мы можем видеть, что первый медиа-запрос начинает работать с 320px (20 × 16px), а второй становится активным с 480px (30 × 16px). Ни одно из объявленных нами изменений font-size Единственный способ изменить значения точки останова медиазапроса — изменить размер шрифта по умолчанию в настройках браузера.

По этой причине не имеет значения, используем ли мы единицы em или rem для точек останова медиазапроса. Zurb Foundation (в настоящее время v6.5.3 на момент написания этой статьи) использует единицы em в медиазапросах.

В поисках доступности

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

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

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

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

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

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

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

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

Вывод

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

Максимально используйте свой текст, понимая, что еще можно сделать с текстовыми значениями CSS. В нашей скриншоте AtoZ CSS: Text and Typography мы рассмотрим свойства текста, свойства шрифта и многое другое.

Это не Конец Света, каким мы его знаем , скорее это еще один путь в пути, который делает разработчиков переднего плана « Блестящими Счастливыми Людьми ».

px, em или rem? — WebBeaver.ru

Когда я создавал библиотеку mappy-breakpoints, чуть больше года назад, я использовал rem-ы. Затем, после разговора с Sam Richard, я переключился на em, потому что узнал, что особой разницы между ними нет. Нахрена переключился тогда?

Кроме em и rem, популярным методом является указание медиа-запросов в старых добрых пикселях. Я задался вопросом, можно ли использовать пиксели в медиа-запросах пока разработчики браузеров не решили проблему с масштабированием.

И на этой неделе я решил поставить точку в этом вопросе.

Чтение этой статьи подразумевает то, что вы знакомы с em и rem. Если нет — валите на хрен вам сначала сюда.

Основной эксперимент

Я создал три div-а, один для пикселей, один для em-ов и один для rem-ов и окрасил их в разные цвета, чтобы легко различать их.

.pixel { background: red; }
.em { background: green; }
.rem { background: blue; }

Затем создал медиа-запрос с min-width для всех трёх блоков, использовав соответствующие единицы. И, чтобы сразу увидеть разницу, сделал их полупрозрачными. Вот как выглядит код для пикселей:

.pixel {
  background: red;  
  @media (min-width: 400px) {
    opacity: 0.5
  }
}

Следующий шаг — выяснить, как это сделать для em и rem.

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

• Font-size для html изменён.
• Пользователь масштабировал страницу/
• Пользователь изменил размер шрифта браузера.

Так как условия идеальны, я смело могу заявить, что 16px == 1em == 1rem. Значит 400px == 25em == 25rem.

.pixel {
  background: red;  
  @media (min-width: 400px) {
    opacity: 0.5
  }
}

.em {
  background: green;  
  // 400 ÷ 16 = 25
  @media (min-width: 25em) {
    opacity: 0.5
  }
}

.rem {
  background: blue;  
  // 400 ÷ 16 = 25
  @media (min-width: 25rem) {
    opacity: 0.5
  }
}

Если все медиа-запросы верны, мы должны увидеть, как они подействуют на 400px.

Так оно и есть (проверял на всех браузерах).

Так как всё работает правильно, то мы можем быть уверены, что на данном этапе нет разницы между пикселями, em и rem.

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

• Font-size для html изменён.
• Пользователь масштабировал страницу/
• Пользователь изменил размер шрифта браузера.

Давайте рассмотрим их по-одному.

1. Размер шрифта html изменён

Первый сценарий — обычное дело.Ведь почти все сайты меняют размер шрифта в CSS:

html { 
  // изменение размера шрифта по-умолчанию 
  font-size: 200% 
}

Итак, я изменил размер шрифта на 200%, а это значит, что 1em и 1rem теперь равен 32px. А если это изменение влияет на em и rem, значит медиа-запросы должны срабатывать на 800px.

Это правильное поведение. Em и rem не должны зависеть от изменений размера шрифта html, потому что они основаны на внутреннем размере шрифта браузера.

К сожалению, в Safari что-то пошло не так. Rem-запрос включается только на 800px.

Так как это происходило только в Safari, мне стало интересно: происходит ли тоже самое на мобильной версии браузера. Оказывается, да.

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

2. Пользователь масштабировал страницу

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

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

Результаты экспериментов в Chrome, Firefox и IE показал такие же результаты. Медиа-запросы в пикселях срабатывают в то же время, что и запросы в em и rem.

И, как вы уже догадались, Safari не может в zoom.

К сожалению, это значит, что мы не можем использовать пиксели в медиа-запросах. Safari не поддерживает их должным образом (или вы решили забить на Safari?).

Переходим к последнему эксперименту, может там что-то интересное произойдёт?

3. Пользователь изменил размер шрифта браузера по-умолчанию

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

Это было бы круто, ведь нам не нужно было бы проделывать третий эксперимент!

К сожалению, мы не можем гарантировать этого и наш долг, как разработчиков, сделать, чтобы всё было нормально.

В этом эксперименте я увеличил размер шрифта браузера по-умолчанию. Если хотите сделать тоже самое — вот путь настроек:

• Chrome: настройки > показать дополнительные настройки > вид страницы.
• Firefox: настройки > содержимое > шрифты и цвета.
• IE: страница > размер шрифта. В IE11 что-то не нашёл такого.

Единственный браузер, в котором я не нашёл данную функцию, оказался ВНЕЗАПНО Safari. Я только сделал, чтобы наименьший размер шрифта был больше 16px (настройки > дополнительные настройки > доступность (?)).

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

Как вы видите, медиа-запросы в пикселях срабатывают раньше, чем в em и rem.

Это не баг. Всё правильно, ведь пиксели — абсолютные единицы. Медиа-запрос срабатывает на 400px и не важно, что пользователь изменил размер шрифта по-умолчанию.

А вот em и rem основаны на размере шрифта браузера. Следовательно, они меняются, когда пользователь меняет размер шрифта браузера.

Что ж… Жаль, что приходится вас расстраивать, любители пикселей, но пиксель не подходит для задания медиа-запросов.

Завершающий эксперимент

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

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

Таким образом, мой совет — используйте em-ы в медиазапросах.

Если вы используете какую-либо библиотеку, медиа-запросы которой основаны не на em-ах — скиньте разработчику ссылку на эту статью, чтобы он знал о последствиях. Или не стесняйтесь и переходите на em-основанные библиотеки вроде Mappy-breakpoints, Breakpoint-sass или sass-mq.

стратег и практик • Интерьер+Дизайн

Архитектор Рем Колхас (Rem Koolhaas, р.17.11.1944) — записной  интеллектуал, притцкеровский лауреат, теоретик, куратор, фаворит модных брендов, автор книг, обязательных к прочтению для продвинутых архитекторов и урбанистов на всех континентах.

По теме: REM: сын об отце

Рем Колхас постоянно пытается делать все иначе, чем принято и привычно. Он по-другому проектирует, неординарно учит студентов, ввел моду на исследовательскую работу (институт AMO). Как проектировщика (бюро OMA) его интересуют урбанистика, коммуникации, изменчивость жизни. Все, что он осуществляет, происходит в модусе переосмысления или как минимум имеет инновационную упаковку. Не просто шаг вперед, скорее скачок на другой уровень.

РЕМ КОЛХАС
Голландский
архитектор. Глава ОМA
и АМО. Слава пришла к нему в 80-х. Парк ла-Вилетт в Париже (1982), Роттердамский художественный музей (1992), Музей Гуггенхайма в Лас-Вегасе (2002), бутик Prada в Нью-Йорке (2003), Посольство Нидерландов в Берлине (2003), библиотека в Сиэтле (2004), ССТV в Пекине (2007) — его рук дело. Он автор книг, среди которых Delirious New York: A Retroactive Manifesto for Manhattan (1978) и Mutations (2001). 

Рем Колхас и Миучча Прада дружат давным-давно (специалистам-архитекторам OMA достаются все проекты реконструкции и строительства зданий Fondazione Prada в Венеции и Милане), официальное сотрудничество AMO и Prada началось с 2007 года, когда междисциплинарные умники Рема Колхаса стали регулярно трудиться над лукбуками и оформлением подиумных показов Prada.

Звезда мировой архитектуры лично открывал новое здание Музея «Гараж» в Парке Горького. При его непосредственном участии создавался Институт медиа, архитектуры и дизайна «Стрелка». В 2012 году вышел русский перевод его бестселлера 1978 года «Нью-Йорк вне себя: ретроактивный манифест Манхэттена». Как пошутил Колхас, это «работа, в том числе, о России, но немного и французская, написанная голландцем по-английски». Долгие годы анонсировалось участие Колхаса в грандиозной реконструкции Государственного Эрмитажа, в результате долгих  отсрочек и согласований проект изменился, коллаборация отложилась, но имя Колхаса надолго засело в ушах россиян. В общем, архитектор он нам не чужой, но от того не менее удивительный.  

Голландец Колхас начинал карьеру как журналист: писал киносценарии и статьи для местной газеты «Гаагская почта». Однажды его послали на интервью к художнику Константу. Колхас, пораженный архитектурной утопией Константа «Новый Вавилон», решил оставить писательскую карьеру и отправился в Лондон изучать архитектуру. А затем в Нью-Йорк к Освальду Маттиасу Унгерсу — на практику. В середине 1970-х он организовал бюро ОМА («Офис городской архитектуры»), основная цель которого — позиционирование архитектуры в контексте актуальной культурной ситуации. В дополнение к офису в Нью-Йорке появилась главная штаб-квартира в Роттердаме. А несколько лет спустя Колхас признал, что практика без теории неубедительна, и открыл еще одну контору — АМО, где, как в настоящем научно-исследовательском институте, собрал профессионалов: социологов, урбанистов, математиков, дизайнеров и т. д. Отряд интеллектуалов кропотливо отслеживает социальные, технологические, медиальные, политические и коммерческие инновации.

В общей сложности в НИИ AMO под руководством Колхаса сегодня работают 220 сотрудников из 35 стран мира. Рациональный мастер ко всему подходит серьезно. И свято следует традиции. Как Рембрандт в своей мастерской, Колхас имеет право на «первый мазок». Гениальный подмалевок дописывают шесть архитекторов-партнеров, которые, однако, могут предлагать и собственные проекты. Каждое предложение тщательно изучается в АМО. Умные мальчики исследуют предпосылки, историю, антропологические тенденции и социальные задачи, и только потом Рем и его команда реализуют проект. Например, палаццо Фондако деи Тедески переделывалось множество раз, и, прежде чем приступить к его реконструкции, штату Колхаса пришлось несколько лет изучать историю постройки.

Конечно, Рем Колхас привлек большое внимание, выступив в 2014 году в качестве куратора XIV Архитектурной биеннале. Мэтра много раз приглашали, он отказывался из-за невозможности подчинить своей исследовательской воле большое количество архитекторов за два года. И вот наконец согласился, ибо придумал концепцию, позволяющую заставить других двигаться в нужном ему направлении, укладываясь в срок. Он придумал трехчастную историю. В проекте «Основы» (Fundamentals) три части: Absorbing Modernity 1914–2014 («Впитывая современность»), Elements of Architecture  («Элементы архитектуры») и Monditalia. Все три экспозиции проливали свет на прошлое и будущее архитектуры. Колхас говорит, что после нескольких биеннале, посвященных актуальной архитектуре, «Основы» yмеренно обращены к прошлому, конечно, с попыткой исследовать настоящее и вообразить будущее. «Впитывая современность» — приглашение ко всем странам-участницам биеннале показать XX век; то, как архитектура страны адаптировала универсальный язык дизайна.

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

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

Таблица соответствия PX и REM

Единица rem — это смесь px и em. rem задаёт размер относительно размера шрифта элемента <html>. 1 rem = 16px.

P.S. rem не поддерживается в IE8-.

Rem в CSS: понимание и использование единиц rem

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

Что такое единицы rem?

Вы могли встретить термин «R.E.M.» перед прослушиванием радио или музыкального плеера. В отличие от своих музыкальных аналогов, названных в честь «Быстрого движения глаз» во время глубокого сна, в CSS rem означает «root em». Они не заставят вас потерять религию или поверить в человека на Луне.Что они могут сделать, так это помочь вам добиться гармоничного и сбалансированного дизайна.

Согласно спецификации W3C определение одной единицы rem:

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

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

единиц Rem и единиц Em

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

  html {
размер шрифта: 100%;
}

ul {
размер шрифта: 0,75em;
}  

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

  ul ul {
размер шрифта: 1em;
}  

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

С единицами rem все проще:

  html {
размер шрифта: 100%;
}

ul {
размер шрифта: 0,75 бэр;
}  

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

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

Одним из пионеров использования модулей rem для изменения размера шрифта является Джонатан Снук, опубликовавший в мае 2011 года статью «Размер шрифта с помощью REM». Как и многим другим разработчикам CSS, ему пришлось столкнуться с проблемами, которые модули em создают в сложных макетах.

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

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

• 10 пикселей = 0,625 бэр
• 12 пикселей = 0,75 бэр
• 14 пикселей = 0,875 бэр
• 16 пикселей = 1 бэр (базовый)
• 18 пикселей = 1,125 бэр
• 20 пикселей = 1,25 бэр
• 24 пикселя = 1,5 бэр
• 30 пикселей = 1,875 бэр
• 32 пикселя = 2 бэр

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

  body {font-size: 62,5%; }
h2 {размер шрифта: 2.4em; }
п {размер шрифта: 1.4em; }
ли {размер шрифта: 1.4em; }  

Поскольку единицы rem относятся к корневому элементу, вариант решения Snook выглядит следующим образом:

  html {размер шрифта: 62,5%; }
body {font-size: 1.4rem; }
h2 {размер шрифта: 2,4 бэр; }  

Также нужно было учитывать другие браузеры, не поддерживающие rem.Таким образом, приведенный выше код на самом деле был бы записан так:

  html {
размер шрифта: 62,5%;
}

тело {
размер шрифта: 14 пикселей;
размер шрифта: 1,4 бэр;
}

h2 {
размер шрифта: 24 пикселя;
размер шрифта: 2,4 бэр;
}  

Хотя это решение кажется близким к статусу «золотого правила», есть люди, которые советуют не использовать его вслепую. Гарри Робертс пишет свой собственный взгляд на использование единиц rem. По его мнению, хотя решение 62,5% упрощает вычисления (поскольку размеры шрифта в пикселей в 10 раз больше их значений rem), оно в конечном итоге вынуждает разработчиков явно переписывать все размеры шрифтов на своем веб-сайте.

Третье мнение принадлежит Крису Койе из CSS-Tricks. Его решение использует все три единицы, с которыми мы столкнулись до сих пор. Он сохраняет корневой размер, определенный как пикселей, , модули, определенные с помощью единиц rem, а элементы внутри модулей, размером с em. Такой подход упрощает управление глобальным размером, который масштабирует тип в модулях, в то время как содержимое модуля масштабируется на основе самого размера шрифта модуля. Луи Лазарис обсуждал эту последнюю концепцию в книге «Сила единиц измерения в CSS».

В приведенном ниже примере вы можете увидеть, как будет выглядеть подход Криса:

См. Метод Pen One для использования ems и rem в CSS от SitePoint (@SitePoint) на CodePen.

На практике существуют основные фреймворки, такие как Bootstrap 4 и рекомендации по материальному дизайну, которые используют единицы rem для изменения размера текстового содержимого.

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

Другой недавний проект, Every Layout, очень вдохновляет сочетанием единиц em и rem. Он ближе всего к схеме модели Криса Койера, описанной ранее, и в нем используются единицы измерения em, чтобы выделить встроенные элементы, такие как значки SVG, промежутки или другие подобные элементы.

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

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

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

  .container {
ширина: 100%;
}

@media (min-width: 85rem) {
.container {
ширина: 65бэр;
}
}  

Однако есть одна интересная деталь о единицах rem и em, когда они используются в качестве единиц для медиа-запросов: они всегда сохраняют одно и то же значение 1rem = 1em = размер шрифта, установленный браузером. Причина такого поведения объясняется в спецификации медиа-запроса (выделено мной):

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

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

Посмотреть демонстрацию медиа-запросов на CodePen

Во-первых, в нашем HTML у нас есть элемент , в котором мы будем писать ширину области просмотра:

  Ширина документа:   px  

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

  html {
размер шрифта: 62.5%;

@media (min-width: 20rem) {

цвет фона: лимонно-шифон;
размер шрифта: 200%;

}

@media (min-width: 30em) {

цвет фона: светло-голубой;
размер шрифта: 300%;
}
}  

Наконец, мы используем немного jQuery для отображения ширины области просмотра на странице, обновляя значение при изменении размера окна:

  $ ('диапазон'). Текст ($ (окно). Ширина ());

$ (window) .on ('изменить размер', function (e) {
$ ('диапазон'). текст ($ (окно). ширина ());
});  

Начнем с трюка 62.5% , чтобы показать, что измененный размер корневого шрифта не влияет на значения, используемые для медиа-запросов.Когда мы изменяем ширину окна браузера, мы видим, что первый медиа-запрос запускается с разрешением 320 пикселей (20 × 16 пикселей), а второй становится активным с разрешением 480 пикселей (30 × 16 пикселей). Ни одно из объявленных нами изменений размера шрифта не повлияло на точки останова. Единственный способ изменить значения точки останова медиа-запроса — изменить размер шрифта по умолчанию в настройках браузера.

По этой причине не имеет значения, используем ли мы единицы em или rem для точек останова медиа-запроса. Zurb Foundation (в настоящее время v6.5.3 на момент написания) использует единицы em в медиа-запросах.

В поисках доступности

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

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

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

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

Использование модулей rem для масштабирования документов. Демонстрация № 1

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

Посмотрим еще:

См. Раздел «Динамическое изменение размеров модулей с модулями Rem» от SitePoint (@SitePoint) на CodePen.

Во втором примере мы делаем то же изменение, используя JavaScript. На этот раз пользователь может контролировать размер интерфейса, настраивая его под свои нужды.Добавьте способ хранения этих пользовательских значений (с использованием базы данных, файлов cookie или локального хранилища), и у вас будет база для системы персонализации, основанной на предпочтениях пользователя.

Заключение

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

Подробнее о калибровочных единицах CSS см .:

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

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

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

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

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

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

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

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

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

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

Длина

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

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

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

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

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

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

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

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

Ширина второго окна устанавливается в единицах vw (ширина области просмотра). Это значение относится к ширине области просмотра, поэтому 10vw составляет 10 процентов ширины области просмотра. Если вы измените ширину окна браузера, размер поля должен измениться.Однако этот пример встроен в страницу с использованием