ex в CSS


Содержание

Знакомство с единицами измерения CSS: пикселями, EM и процентами

22 августа 2014 | Опубликовано в css | 4 Комментариев »

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

Пиксель

Пиксель — это фиксированная единица измерения и наименьшая единица измерения экрана, но не путайте его с пикселем, которой определяет разрешение экрана. Пиксель в CSS не связан с разрешением экрана. Если мы откроем веб-страницу фиксированной ширины в 1024px, допустим, на планшете с разрешением экрана 1024px на 480px, веб-страница не поместится в экран.

Мы сталкивались с этой проблемой раньше и обнаружили, что пиксель в CSS – это не линейная единица измерения, по факту это векторная единица измерения. По сути пиксель в CSS измеряет длину показываемой области, а не разрешение экрана, т. е., если разрешение экрана 1024px, то это не значит, что страница будет иметь ширину 1024px.

Еще о пикселях

Если вы разбираетесь в тригонометрии и хотите узнать больше, посмотрите следующее объяснение от Sean B. Plamer: «Пиксель в CSS – это угловая единица измерения».

Определение размера экрана

Так как же узнать реальный размер экрана устройства? К счастью, существует удобный специальный калькулятор, чтобы приблизительно оценить размер экрана в пикселях, Сантиметры в пиксели. Нам понадобятся только длина и ширина экрана устройства и PPI (пиксели на дюйм) / DPI (точки на дюйм), эти данные Вы можете получить с упаковки устройства.

Размер пикселя в Photoshop

Работая в Photoshop, можно заметить, что размер шрифта по умолчанию задан в Pt (Points, точки). Единица измерения Pt очень подходит для стилей печати. Чтобы не путать Pt и Px, когда мы преобразуем документ в веб-сайт, мы можем изменить единицы измерения в следующем меню: Edit/Редактировать > Preferences/Настройки > Units and Rulers/Единицы и линейки.

И там откроется окно с настройками, как показано на снимке экрана ниже. Выберите pixels (пиксели) для Type unit/тип единц.

И после этого размер шрифта отображается в пикселях.

EM — это относительная единица измерения. В CSS EM обозначает множитель размера шрифта по умолчанию у устройства или документа.

Например, допустим, в документе размер шрифта задан как 16px. 1em равен 16px, 2em – 32px и так далее. Хотя EM обычно используется для обозначения размера шрифта и фактически это стандартная единица измерения в стилях браузера для измерения размера шрифта, мы можем также использовать EM, чтобы задавать длину элемента.

Единственная проблема при использовании EM – это то, что он не очень интуитивно понятен, но есть два способа справиться с этим. Во-первых, мы можем использовать удобный калькулятор PX в EM.

Другой способ — установить размер пикселя по умолчанию равным 10px, чтобы было удобнее считать, например, задав 15px как 1.5em. Надеемся, вы получили общее представление с помощью этого примера.

Процент

С процентом все более понятно, он устанавливается относительно родительского блока. Если ширина родительского блока 800px, тогда 50% будет 400px. За последние годы адаптивный дизайн становится стандартом в веб-дизайне, так что единица измерения процент используется все чаще.

Давайте рассмотрим следующий пример, в отрывке кода ниже задается значение ширины, равное 60%, блокам классов .container и .main, но у блоков этих классов разные родительские блоки, так что они будут разной длины. Блок класса .container займет 60% ширины видимой области браузера, а блок класса .main займет 60% ширины своего родительского блока класса .container.

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

Так как процент тоже относительная единица измерения, с ним есть такая же проблема, как и с единицами измерения EM. Может быть сложно быстро сосчитать в уме, сколько процентов от 500px составит 15px. Это обычно происходит, когда мы переводим единицы измерения пиксели из фазы дизайна в веб-страницу. Есть два пути, которыми можно решить эту проблему: Вы можете традиционно считать с помощью калькулятора, или, если Вам удобно использовать предобработчик CSS, Вы можете использовать функцию percentage()из Sass.

Заключение

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

Автор урока Thoriq Firdaus

Единицы измерения CSS (пиксели, Em и Ex) и функция calc. Примеры

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

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

Единица Описание
mm Миллиметр
cm Сантиметр (равен 10mm)
in Дюйм (равен 2,54cm)
pt Пункт (равен 1/72in)
pc Пика (равна 12pt)

Абсолютные единицы используются реже чем относительные и применяются в основном для задания размера текста. А для указания размера текста в основном используют пункт (pt), который получается путем деления одного дюйма на 72 части. Дюйм в свою очередь равен примерно 25,4 миллиметра, соответственно один пункт примерно равен одной трети миллиметра. Пример использования абсолютных единиц измерения:

Ex в CSS

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

Знакомимся с единицами

Эм (em): em это масштабируемая единица, которая используется для веб-документов. Один em равняется текущему размеру шрифта. Например, если размер шрифта документа 12pt , то 1em равняется 12pt . Поскольку em масштабируется, то 2em равняется 24pt , .5em равняется 6pt и т.д. Благодаря своей масштабируемости и высокой совместимости с мобильными устройствами, em все чаще используется в веб-документах.

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

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

  • Проценты (%): Процент во многом похож на em , за исключением нескольких принципиальных различий. Во-первых, текущий размер шрифта равняется 100% (т.е. 12pt = 100%). Использование единицы Процент позволяет вам увеличивать/уменьшать свой текст для удобства чтения.
  • В чем же различие?

    Разницу между этими единицами легко понять на конкретных примерах. Вот как они соотносятся друг с другом: 1em = 12pt = 16px = 100%. Давайте посмотрим, что произойдет, когда мы увеличим основной размер шрифта (используя CSS-селектор body) с 100% до 120%.

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

    EM или Процент?

    Мы выяснили что Точка и Пиксель не лучшие единицы для веб-документов. Итак, у нас остались Эм и Процент. Теоретически, Эм и Процент – одинаковые единицы, но на практике между ними есть мелкие различия, которые нельзя не учитывать.

    В приведенном выше примере мы использовали единицу Процент в качестве базового размера шрифта (для тэга body ). Если вы измените базовый размер шрифта с Процентов на Эм (т.е. body < font-size: 1em; >), то разницы вы, скорее всего, не заметите. Давайте посмотрим, что произойдет, когда размером шрифта для body является 1em , и когда клиент меняет в браузере настройку «Размер текста» (такая настройка доступна в некоторых браузерах, например в Internet Explorer).

    Когда размер текста в браузере клиента установлен на «средний» (medium), между Эм и Процентом различий не наблюдается. Но если эту настройку изменить, то разница станет вполне заметной. При настройке «Самый мелкий» (Smallest) Эм оказываются намного мельче, чем Проценты. А при настройке «Самый крупный» (Largest) все наоборот – Эм намного больше, чем Проценты. Можно сказать, что единицы Эм масштабируются, как им и положено делать, но на практике такой текст масштабируется слишком резко, и на некоторых устройствах самый мелкий текст становится нечитаемым.

    Вывод

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

    Победитель: процент (%).

    Обычно когда я создаю новый дизайн, то для элемента body я использую проценты ( body < font-size: 62.5%; >), а затем использую em для дальнейшего масштабирования. Пока в настройках для body используется единица Процент, вы можете использовать либо Процент, или Эм для любых других правил и селекторов CSS и при этом пользоваться преимуществами, которые дает использование Процента в качестве основного размера шрифта.

    За последние несколько лет такая практика стала очень распространенной в веб-дизайне.
    Пиксели сейчас используются в качестве допустимых единиц размера шрифта (для чтения мелкого текста пользователи могут использовать функцию браузера «зум»). Однако использование пикселей становится проблематичным из-за мобильных устройств с экранами с очень высокой плотностью пикселей (некоторые устройства Android и iPhone имеют плотность в 200-300 пикселей на дюйм, в связи с чем шрифты в 11 и 12-пикселей становятся плохо различимыми). Итак, я продолжаю использовать Процент в качестве основного размера шрифта для веб-документов.

    Илон Маск рекомендует:  Активизация ссылок и е-mail адресов на странице

    Единицы измерения CSS (px, %, em, vw, vh, vmin, vmax) и функция calc

    Многие свойства CSS имеют свои единицы измерения, рассматривать все в одной статье нет необходимости.

    1px (пиксель) = 1/96 дюйма, но не в CSS. 1 px в CSS — это точка на экране пользователя, физическая величина которой зависит от разрешения устройства и от того, с какого расстояния человек смотрит на его поверхность (мобильный телефон или телевизор). В каких бы единицах измерения мы бы не писали код, он приводится именно к px.

    1 em = значению font-size родителя. Обратите внимание, что в полигоне ниже font-size жёлтого и коричневого блоков разный, а размер шрифта одинаковый.

    1 rem = значению font-size (корневого элемента документа).

    1 процент (1%) — значение высчитывается относительно значения свойства родительского тега.

    При уменьшении ширины родителя, уменьшается и ширина элемента, но не его шрифт.

    1vw = 1% от ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl + или Ctrl — .

    1vh = 1% от высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl + или Ctrl — .

    1vmin = 1vw или 1vh. Выбирается то, которое меньше.

    1vmax = 1vw или 1vh. Выбирается то, которое больше.

    Функция calc()

    Никогда не хотелось от процентов вычесть пиксели или емы? Например, для того, чтобы кнопка «наверх» была как ВКонтакте и держалась точно по левому краю от содержания. Теперь это возможно. Функция calc() позволяет реализовать математические выражения

    What is the value of the css ‘ex’ unit?

    (Not to be confused with Xunit, a popular .Net unit testing library.)

    Today in a fit of boredom I started inspecting Gmails DOM (yes, I was very bored).

    Everything looked pretty straightforward until I noticed an interesting specification on the widths of certain elements. The illustrious Googlites had specified a number of table cols using the rare ‘ex’ unit.

    At first I was stumped («what’s an ‘ex’?»), then it came back to me: I seem to remember something from years ago when first I was learning about CSS. From the CSS3 spec:

    [The ex unit is] equal to the used x-height of the first available font. The x-height is so called because it is often equal to the height of the lowercase «x». However, an ‘ex’ is defined even for fonts that do not contain an «x».

    Well and good. But I’ve never actually seen it used before (much less used it myself). I use ems quite commonly, and appreciate their value, but why the «ex»? It seems much less standard a measurement than the em, and far less useful.

    One of the few pages I found discussing this topic is Stephen Poley’s http://www.xs4all.nl/

    sbpoley/webmatters/emex.html. Stephen makes good points, however, his discussion seems inconclusive to me.

    So my question is: What value does the ‘ex’ unit lend to web design?

    (This question could be tagged subjective, but I’ll leave that decision to more experienced SO’ers than myself.)

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

    Данная статья учебника посвящена вопросам, связанным с управлением размера шрифта в CSS, в том числе существующие ключевые слова. Рассмотрено применение всех единиц измерения современного стандарта, а именно: дюймы, сантиметры, миллиметры и четверь миллиметра, пики, пункты, пиксели, процентные значения, единица измерения еm, rem, еx, ch и масштабируемые величины относительно экрана — vw, vh, vmin и vmax.

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

    В CSS за установку размера шрифта отвечает CSS свойство font-size, которое имеет поддержку всеми основными браузерами. Свойство font-size записывается следующим образом:

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

    В CSS 3 существует разнообразный набор единиц измерения для различных задач, давайте рассмотрим, что нам предлагает современный стандарт.

    Абсолютные величины

    Физические единицы:

    • Дюймы (in), 1in = 2.54cm (сантиметры) = 96px (пиксели).
    • Сантиметры (cm), 1cm = 96px/2.54.
    • Миллиметры (mm), 1mm = 1/10 от 1cm.
    • Четверть миллиметра, (q) 1q = 1/40 от 1cm.
    • Пики (pc), 1pc = 1/6 от 1 дюйма, 1pc = 12pt = 1/6 дюйма.
    • Пункты (pt), 1pt = 1/72 дюйма.

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

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

    Визуальные единицы:

    Пиксели (px), 1px = 1/96 от 1in (дюйма).

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


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

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

    Относительные единицы

    Процентные значения.

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

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

    Давайте рассмотрим пример. Допустим, у всех параграфов (элемент

    ) установлен базовый размер шрифта 16px и мы хотим отобразить в одном параграфе определённую информацию шрифтом в два раза больше, а в другом в два раза меньше. Для этого мы создадим для них отдельные блоки описаний (стили):

    Результат нашего примера:

    Рис.51 Пример использования процентных значений.

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

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

    Результат нашего примера:

    Рис.52 Пример наследования процентных значений.

    В данном примере для вложенного блока

    Расчёт размера шрифта для вложенного блока будет выглядеть следующим образом:

    Если бы мы не изменили значение размера шрифта для блока

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

    Надо понять, что для этих вложенных элементов размер шрифта в 100% теперь равен 24px, а значение в 200% равно 48px, т.к. расчёт происходит исходя из размера шрифта родительского элемента:

    Единица измерения еm.

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

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

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

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

    Результат нашего примера:

    Рис.53 Пример использования значений em.

    Многие создатели сайтов выбирают именно эти единицы измерения при создании своих таблиц стилей.

    Единица измерения rеm.

    Стандарт CSS 3 подарил нам новую относительную единицу измерения rem, что является сокращением от Root em – значение основано на размере текста корневого (root) элемента.

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

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

    Если у Вас где-то размер не соответствует Вашим ожиданиям, ищите проблему в наследовании :)

    Рис.54 Пример наследования значений em.

    Оставим единицу измерения em и рассмотрим этот же пример с использованием единицы rem .

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

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

    Рис.55 Пример использования значений rem.

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

    Единица измерения еx.

    Единица измерения ex зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из высоты прописной буквы «x». Данная единица измерения имеет очень редкое применение, в основном касается типографских микро настроек.

    В большинстве шрифтов высота прописной «x» соответствует 0.5em. Если браузер не может определить размер прописной «x», то в этом случае будет установлено значение равное 0.5em.

    Единица измерения ch.

    Единица измерения ch зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из ширины символа ‘0’ (ноль, символ Юникода U+0030). Данная единица измерения имеет очень редкое применение, например, если вы хотите создать блок моноширинным шрифтом (имеет символы одной ширины) с заданным количеством символов, которые он может вместить:

    Если браузер не может определить размер «0», то в этом случае будет установлено значение равное 0.5em.

    Масштабируемые величины относительно экрана

    С развитием стандарта каскадных таблиц стилей стали доступны такие единицы измерения, которые позволяют задать размеры относительно окна пользователя (области просмотра).

    Область просмотра (viewport) это то место, где браузер отображает сайт минус зарезервированное пространство браузера.

    В CSS 3 существуют 4 (четыре) различных единицы измерения величины относительно экрана — две для каждой оси и две единицы измерения, определяющие минимальное и максимальное значение:

    Илон Маск рекомендует:  Обход и манипуляция

    Например, если ширина области просмотра 1000px, то 1vw будет соответствовать 10 (десяти) пикселям.

    1vh (viewport height)= 1% от высоты области просмотра. При уменьшении высоты окна пропорционально уменьшается тот параметр элемента, который был задан.

    Например, если высота области просмотра 500px, то 1vh будет соответствовать 5 (пяти) пикселям.

    В данном примере мы установили для трёх блоков разные значения таких параметров как размер шрифта (для первого – 5vw (5% от ширины области просмотра), для второго — 4vw , для третьего — 3vw ), ширину блоков (для первого – 100vw (100% от ширины области просмотра), для второго — 75vw , для третьего — 50vw ) и высоту блоков (для первого – 30vh (30% от высоты области просмотра), для второго — 50vh , для третьего — 20vh ).

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

    Чтобы избавится от полосы прокрутки, мы установили универсальный селектор *, который выбирает все элементы и убирает внешние отступы у всех элементов. Это мы сделали по той причине, что некоторые браузеры при работе с данными единицами измерения при 100vw добавляют полосу прокрутки, чего быть не должно (этот баг возникает при overflow : auto – свойство, которое отвечает за переполнение элемента содержимым, установленное по умолчанию).

    Полную информацию о работе с внешними отступами вы получите в статье учебника «Блочная и строчная модель в CSS», а работу с переполнением элементов мы рассмотрим в статье «Размеры блочных элементов в CSS».

    Результат нашего примера:

    Рис.57 Масштабируемые единицы измерения.

    Минимальное и максимальное значение области просмотра

    Заключительные единицы измерения, которые мы рассмотрим в этой статье это vmin и vmax. Обратите внимание на то, что эти значения могу принимать как значения высоты, так и ширины области просмотра:

    1vmin = 1vw или 1vh. Выбирает минимальное значение между высотой и шириной области просмотра.

    1vmax = 1vw или 1vh. Выбирает максимальное значение между высотой и шириной области просмотра.

    Давайте рассмотрим, в чем заключается разница между vmin и vmax на следующем примере:

    В нашем примере мы создали два блока, которые разместили в «линейку» (используя свойство display : inline-block ), как и в прошлом примере убрали все внешние отступы свойством margin со значением 0 .

    Первый блок с классом viewportMin (черный на изображении) имеет значения для высоты и ширины 40vmin . Это означает, что выбирается минимальное значение между высотой и шириной окна просмотра и устанавливается 40%. В нашем случае разрешение окна браузера было 400 пикселей ширина и 700 пикселей высота. В этом случае 400 пикселей минимальное значение и браузер выбирает его. Ширина высчитывается как:

    Для высоты расчёт аналогичен:

    В итоге мы получили «квадрат Малевича».

    Что касается второго блока с классом viewportMax, то всё происходит с точностью да наоборот. Браузер определяет текущее максимальное значение viewport (область просмотра), оно у нас равно 700px на изображении и высчитывает ширину и высоту элемента:

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

    Рис.58 Пример использования vmin и vmax c масштабируемыми единицами измерения.

    Масштабируемые единицы измерения, надеюсь, имеют счастливое будущее, но в настоящее время не так активно используются по тем основным причинам, что:

    1. Отсутствует полная поддержка данных единиц измерения некоторыми мобильными браузерами (например, Opera Mini и UC Browser for Andro >vmax , iOS Safari – стабильная поддержка только с 8 версии (6 версия — не поддерживала vmax , 7 версия – некорректно работала единица измерения vh ).
    2. Internet Explorer и Edge не имеют полную поддержку данных единиц измерения:
      • IE работает только с версии 9.0 (поддерживает значение vm , вместо vmin ).
      • IE 10, IE 11 не поддерживают значение vmax .
      • Edge 12, 13, 14 не поддерживают значение vmax .

    Завершая данную большую тему, думаю стоит рассмотреть еще один способ как можно задать размер шрифта в CSS, а именно использование ключевых слов совместно со свойством font-size.

    Полный перечень возможных ключевых слов с расшифровкой размещен в следующей таблице:

    Значение Описание
    medium Устанавливает размер шрифта среднего размера. Это значение по умолчанию.
    small Устанавливает размер шрифта маленького размера. Эквивалент 13px (пикселов).
    x-small Задает размер шрифта очень маленького размера. Эквивалент 10px (пикселов).
    xx-small Задает размер шрифта сверх маленького размера. Эквивалент 9px (пикселов).
    smaller Устанавливает размер шрифта меньшего размера, чем у родительского элемента.
    large Устанавливает размер шрифта большого размера. Эквивалент 18px (пикселов).
    x-large Устанавливает размер шрифта очень большого размера. Эквивалент 24px (пикселов).
    xx-large Задает размер шрифта сверх большого размера. Эквивалент 32px (пикселов).
    larger Устанавливает размер шрифта большего размера, чем у родительского элемента.

    Рассмотрим пример использования ключевых слов на странице:

    В нашем случае ключевое слово smaller (одноименный класс) устанавливает шрифт на один пиксель меньше, чем у родительского элемента с классом xx-small, а ключевое слово larger устанавливает шрифт на 6 пикселей больше, чем у родительского элемента (xx-large).

    Результат нашего примера:

    Рис.59 Использование ключевых слов для управления размером шрифта.

    Вопросы и задачи по теме

    Перед тем как перейти к изучению следующей темы пройдите следующие практические задания:

      Практическое задание № 13
      У нас имеются следующие стили, в которых элемент и элементы

    Ответьте на следующие вопросы к практическому заданию:

    • Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — .
    • Сколько в пикселях составляет размер шрифта текста, внутри блока

    Ответьте на следующие вопросы к практическому заданию:

    • Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — .
    • Сколько в пикселях составляет размер шрифта текста, внутри блока

    Ответьте на следующие вопросы к практическому заданию:

    • Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — .
    • Сколько в пикселях составляет размер шрифта текста, внутри блока

    7 единиц CSS о которых вы должны знать

    Работая с CCS, очень легко застрять на каком-то моменте, ведь порой работая даже по знакомому методу, бывает, что появляются новые проблемы.

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

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

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


    rem

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

    Здесь мы написали, что у div font-size будет равен 1.2em. Это в 1.2 раза больше чем font-size, у которого он унаследовал, он составлял 14px. Таким образом, результат 16.8px.

    Однако, что произойдет, если вы каскадом расположите определяемые em font-size внутри друг друга? В следующем отрывке мы применяет тот же самый CCS, что и выше. Каждый div наследует font-size от своего родителя, выдавая нам постепенно увеличивающиеся размеры шрифта.

    Не смотря на то, что это может подойти в некоторых случаях, часто мы хотим просто полагаться на единственную метрику для измерения. В этом случае мы должны использовать rem. “r” в rem обозначает “корень”; он равен набору размера шрифта в элементе корня; в большинстве случаев он является элементом HTML.

    Во всех трех div из предыдущего примера, шрифт может достигать 16.8px.

    5 баллов, Grid

    Rem полезны не только в калибровке шрифта. Например, мы могли бы базировать всю систему grid или библиотеку UI по использованию размера шрифта HTML корня rem, и использовать их вычисление в определенных местах. Это дало бы нам более предсказуемую калибровку шрифта и вычисления.

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

    vh и vw

    Отзывчивые методы веб-дизайна полагаются, в большой степени, на правило процента. Однако процент CSS – не всегда лучшее решение для каждой проблемы. Ширина CSS родственна ближайшему элементу, в котором содержится родитель. Что, если мы хотим использовать ширину или высоту окна просмотра вместо ширины исходного элемента? Это именно то, что помогают делать единицы vh и vw.

    Элемент vh равен 1/100 высоты окна просмотра. Например, если высота браузера 900px, 1vh может достигать 9px. Также, если ширина окна просмотра составляет 750px, 1vw может достичь 7.5px.

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

    Предположим, вы хотите сделать заголовок, который заполнит всю ширину экрана. Чтобы сделать это, вам необходимо установить font-size в vw. Этот размер будет соизмерим с шириной браузера.

    vmin и vmax

    В то время как vh и vm всегда связаны с высотой и шириной окна просмотра, также vmin и vmax связаны с максимумом и минимумом этой высоты и ширины, в зависимости от того, какая из них меньше, а какая больше. Например, если браузер имеет параметры 1100px в ширину и 700px в высоту, 1vmin будет 7px, а 1vmax – 11px. Однако, если ширина установлена на 800px, а высота на 1080px, то vmin будет равен 8px, в то время как vmax будет установлен на 10.8px.

    В каких случаях вы сможете использовать эти значения?

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

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

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

    ex и ch

    Единицы ex и ch, так же как em и rem, соотносятся с current font и font size. Однако, поскольку они основаны на определенных для шрифта мерах, ex и ch также соотносятся с font-family, в отличие от em и rem.

    Единица ch или единица character, определяется как «улучшенная мера» ширины знака 0. Это понятие вызвало много споров, но основная идея состоит в том, что обладая шрифтом фиксированной ширины, квадрат с шириной N знаками единиц, таких как width: 40ch; могут всегда содержать последовательность из 40 знаков в этом конкретном шрифте. В то время как обычное использование этого особого правила состоит в расположении шрифта Брайля, возможности для креативности здесь, конечно, простираются вне этих простых заявлений.

    Единица ex определяется как «х-высота текущего шрифта ИЛИ одна-вторая от em». Thex-высота данного шрифта – высота строчных букв x того шрифта. Чаще всего, это примерно в средней отметке шрифта.

    Существует много областей, где могут использоваться подобные единицы. Чаще всего в типографии. Например, элемент sup, который выступает как superscript, может быть добавлен в строку, используя соответствующую позицию и конечное значение 1ex. Точно так же вы можете сбросить нижний элемент. Ошибки браузера исправляются правилами superscript- и subscript-specific vertical-align, но если вы хотите больше контроля, вы можете попробовать следующее:

    Вывод

    Очень важно следить за развитием и распространением CSS, так же как и узнавать о новых инструментах и добавлять их к себе в список умений. Скорее всего, вы встретитесь с проблемами, которые могут быть решены с помощью этих единиц. Не пожалейте времени и прочитайте спецификацию. Подпишитесь на обновления от cssweekly. И, конечно, не забудьте подписаться на еженедельные обновления и бесплатные обучающие видео на Tuts+!

    Учимся понимать единицы «em» в CSS

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

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

    В спецификации представлено довольно простое объяснение параметру em:

    Другими словами, если у нас будет следующий код CSS:

    Это означает, что 1em, установленное в том элементе или в любом из его дочерних элементах, будет равное 20 пикселям. Вот доказательство .

    Если вы используете следующий код:

    Это означает, что ширины и высота элемента (указанные здесь как 4em x 4em) будут составлять 80px x 80px (20px * 4 = 80 px).

    Ключом к запоминанию является предназначение em и происхождение данного параметра. Следуя материалам из Wikipedia :

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

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

    А что если я не использую параметр font-size?

    В примере, приведенном выше, и в JSBin, на который мы сослались, точно указан параметр font-size. Единица em впоследствии выводится из параметра «base». Но что если в элементе не указан точный параметр font-size?

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

    «rem» должен быть автоматическим для людей

    Пришло время привлечь и новое добавление в CSS: единицу rem . Данная единица (название получено от «root em») отлично поддерживается во всех браузерах: IE9+, FF3.6+, Chrome, Safari 5+ и Opera 11.6+.

    В целом, данная единица очень проста к пониманию. Она дает вам возможность сделать так, чтобы значения единиц em во всем HTML-документе были основаны на одном «главном» значении, указанном в «html»-элементе. Таким образом, вы можете забыть про параметр font-size, так как все em-единицы, использованные в документе, будут основаны на главном значении rem, например:

    И, как и в случае с em, если вы не указываете значение font-size в «html»-элементе, то «главная» единица (root em) будет равна 16 пикселям по умолчанию.

    Можно выдумать еще целую кучу выражений с em :)

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

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

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

    Не забываем комментировать!

    Вам понравился материал? Поблагодарить легко!
    Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

    Единицы измерения CSS (px, %, em, vw, vh, vmin, vmax) и функция calc

    Многие свойства CSS имеют свои единицы измерения, рассматривать все в одной статье нет необходимости.

    1px (пиксель) = 1/96 дюйма, но не в CSS. 1 px в CSS — это точка на экране пользователя, физическая величина которой зависит от разрешения устройства и от того, с какого расстояния человек смотрит на его поверхность (мобильный телефон или телевизор). В каких бы единицах измерения мы бы не писали код, он приводится именно к px.

    1 em = значению font-size родителя. Обратите внимание, что в полигоне ниже font-size жёлтого и коричневого блоков разный, а размер шрифта одинаковый.

    1 rem = значению font-size (корневого элемента документа).

    1 процент (1%) — значение высчитывается относительно значения свойства родительского тега.

    При уменьшении ширины родителя, уменьшается и ширина элемента, но не его шрифт.

    1vw = 1% от ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl + или Ctrl — .

    1vh = 1% от высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl + или Ctrl — .

    1vmin = 1vw или 1vh. Выбирается то, которое меньше.

    1vmax = 1vw или 1vh. Выбирается то, которое больше.

    Функция calc()

    Никогда не хотелось от процентов вычесть пиксели или емы? Например, для того, чтобы кнопка «наверх» была как ВКонтакте и держалась точно по левому краю от содержания. Теперь это возможно. Функция calc() позволяет реализовать математические выражения

    Значения и единицы измерения CSS

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

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

    Ключевые слова — это определенная последовательность символов латинского алфавита с возможным добавлением дефиса (-) в качестве разделителя. Как правило данные значения являются осмысленными словами английского языка, по которым можно понять суть действия ключевого слова.

    Пример использования ключевых слов в CSS

    Результат в браузере

    Числовые значения CSS

    Значениями свойств в данном случае могут быть целые или дробные числа, состоящие из арабских цифр (0-9). Если число дробное — оно записывается с точкой, а не с запятой. Кроме этого числа могут быть положительными или отрицательными, в случае отрицательных значений перед числом ставится знак минус (-). Далеко не все свойства CSS могут иметь отрицательные или дробные значения.

    Пример использования чисел в качестве значений

    Результат в браузере

    Размеры CSS

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

    Относительные размеры CSS

    Единицы измерения Описание Пример
    em Исчисляется в размерах шрифта данного элемента (font-size), где 1em как раз и соответствует размеру шрифта. margin: -7em;
    ex Высота строчной буквы «x» шрифта данного элемента. padding: 1.3ex;
    px Пиксели. Измеряется в пикселях монитора компьютера или другого визуального устройства. Пиксель — это самая маленькая точка на мониторе высчитываемая исходя его разрешения. left: -150px;
    Абсолютные размеры CSS
    Единицы измерения Описание Пример
    cm Сантиметры. width: 9.5cm;
    mm Миллиметры. height: 223mm;
    in Дюймы. 1 дюйм равен 2.54 сантиметра. bottom: -2in;
    pt Пункты. 1 пункт равен 1/72 дюйма. font-size: 18pt;
    pc Пики. 1 пика равна 12 пунктам. min-width: 2.7pc;

    Пример указания размеров в CSS

    Результат в браузере

    Помните и никогда не забывайте о том, что размеры в CSS (в отличие от HTML) всегда пишутся с указанием единиц измерения, как показано в примере. Ошибки, когда например вместо 150px пишут просто 150 являются самыми распространенными среди новичков, поэтому давайте-ка не будем пополнять их ряды, хорошо? :)

    Проценты

    Процентные значения в CSS записываются также, как в HTML — это целые или дробные положительные или отрицательные числа со знаком процента (%) на конце. Проценты тоже являются относительными единицами измерения, так как всегда зависят от какого-то другого значения, которое приравнивается к 100%.

    Пример использования процентов в CSS

    Результат в браузере

    Ширина этого параграфа равна половине ширины элемента BODY, а именно 200px.

    Текстовые строки

    Текст в CSS должен быть обязательно заключен в служебные двойные (» «) или одинарные (‘ ‘) кавычки, причем, если внутри текста используются двойные кавычки, то служебные должны быть одинарными и наоборот (‘Агентство «ВИА» сообщает’).

    Если же вы все-таки хотите указать внутри текста такие же кавычки, как и служебные — вам поможет символ обратного слеша (\). Дело в том, что если обратный слеш ставится перед кавычкой, то он отменяет ее действие в качестве служебной (‘Агентство \’ВИА\’ сообщает’). Причем, обратный слеш в таком случае не будет отображен на странице, а будут выведены только сами кавычки.

    Адреса файлов (URL)

    Ожидается, что в будущем появится еще один определитель ресурса — URN , который в соединении с URL получит название URI .

    Пример указания адресов в CSS

    Результат в браузере

    • Ниф-Ниф
    • Нуф-Нуф
    • Наф-Наф

    Цвета в CSS

    Цвет в CSS можно указывать несколькими способами: по имени цвета, по HEX-коду, в формате RGB.

    • Имя цвета — Многие цвета имеют имена, которые браузеры понимают, например: red, green, blue.
    • HEX-код цвета — Шестнадцатеричное значение цвета, перед которым ставится знак решетка (#). Каждый HEX-код состоит из трех пар: первая пара отвечает за красный цвет, вторая — за зеленый, третья — за синий, например: #CC9966 или #996699.
    • Цвет в формате RGB — Цвет в десятичном формате, он начинается с аббревиатуры RGB, после которой в скобках, через запятую, указываются три значения. Здесь тоже первое число отвечает за красный цвет, второе — за зеленый, третье — за синий, например: RGB(153, 204, 51).

    Пример указания цвета в CSS

    Результат в браузере

    Значения по умолчанию

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

    • Введение
    • Что такое CSS?
    • Синтаксис CSS
    • Подключение CSS
    • Типы устройств
    • Базовый синтаксис
    • Значения и единицы измерения CSS
    • Комментарии в CSS
    • Селекторы CSS
    • Селекторы тегов
    • Селекторы атрибутов
    • Универсальный селектор
    • Классы
    • Идентификаторы
    • Селекторы потомков
    • Дочерние селекторы
    • Соседние селекторы
    • Псевдоклассы
    • Псевдоэлементы
    • Обработка CSS
    • Наследование
    • Приоритеты стилей

    Copyright © 2010-2015 seodon.ru Все права защищены.

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

    Илон Маск рекомендует:  Что такое код 1cphpmysql
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL