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

Рубрика: Справочник CSS
10 июля 2015

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

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

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

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

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Абсолютные единицы</title>
    <style type="text/css">
      .mm { font-size: 8mm; }
      .cm { font-size: 1cm; }
      .in { font-size: 1in; }
      .pt { font-size: 24pt; }
      .pc { font-size: 1pc; }
    </style>
  </head>
  <body>
    <p class="mm">Размер 12 миллиметров</p>
    <p class="cm">Размер 1 сантиметр</p>
    <p class="in">Размер 1 дюйм</p>
    <p class="pt">Размер 24 пункта</p>
    <p class="pc">Размер 1 пика</p>
  </body>
</html>

Результат:

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

Посмотреть в браузере

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

Видеокурс "Создание и раскрутка сайта от А до Я"

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

Единица Описание
px Пиксел
% Процент
em Высота шрифта родительского элемента
ex Высота символа x

1 px в CSS, как мы уже говорили выше, это точка на экране пользователя, физическая величина которой зависит от разрешения устройства и от того, с какого расстояния человек смотрит на его поверхность.
При указании процентов размер вычисляется в зависимости от размера родительского элемента. Так, например если ширина родительского элемента 500px, то при указании width:50% ширина элемента будет 250px.

em привязан к размеру шрифта, заданного в браузере по умолчанию или к размеру шрифта родительского элемента. А ex это высота прописной (маленькой) буквы «x» (икс) в латинской раскладке. То есть em также привязан к размеру шрифта, заданного в браузере по умолчанию или к размеру шрифта родительского элемента. Примеры:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Относительные единицы</title>
    <style type="text/css">
      .px { font-size: 20px; }
      .percent { font-size: 150%; }
      .em { font-size: 2em; }
      .ex { font-size: 2ex; }
    </style>
  </head>
  <body>
    <p class="px">Размер 20 пикселов</p>
    <p class="percent">Размер 150%</p>
    <p class="em">Размер 2 em</p>
    <p class="ex">Размер 2 ex</p>
  </body>
</html>

Результат:

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

Посмотреть в браузере

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

Единица Описание
vw 1% от ширины области просмотра
vh 1% от высоты области просмотра
vmin 1% от меньшего значения из ширины и высоты области просмотра
vmax 1% от большего значения из ширины и высоты области просмотра

Примеры использования:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Относительные единицы</title>
    <style type="text/css">
      .vw { font-size: 2vw; }
      .vh { font-size: 2vh; }
      .vmin { font-size: 2vmin; }
      .vmax { font-size: 2vmax; }
    </style>
  </head>
  <body>
    <p class="vw">Размер 2 vw</p>
    <p class="vh">Размер 2 vh</p>
    <p class="vmin">Размер 2 vmin</p>
    <p class="vmax">Размер 2 vmax</p>
  </body>
</html>

Результат

Функция calc ()

Видеокурс "Создание и раскрутка сайта от А до Я"

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

div {
  width: calc (100% — 40px);
}

В этом случае ширина div-а будет равно ширине родительского элемента минус 40 пикселей.

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

  • + — сложение. Символ отделяется пробелами с двух сторон (height: calc (20% + 50px));
  • — — вычитание. Символ отделяется пробелами с двух сторон (width: calc (90% — 10px););
  • * — умножение (padding: calc (2em*2););
  • / — деление. На ноль делить запрещено (width: calc (100%/4);).

В браузерах Firefox до версии 16.0 поддерживается функция -moz-calc, в Chrome до версии 26.0 и в Safari с версии 6.0 поддерживается -webkit-calc.

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

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Функция calc</title>
    <style type="text/css">
      html, body{
        height: 100%;
      }
      #element1, #element2{
        float: left;
        width: -webkit-calc (100%/2 — 25px);
        width: -moz-calc (100%/2 — 25px);
        width: calc (100%/2 — 25px);
        height: 100%;
        background-color: #faf;
      }
      #element2{
        margin-left: 50px;
      }
    </style>
  </head>
  <body>
    <div id="element1"></div>
    <div id="element2"></div>
  </body>
</html>

Демо

Получай статьи почтой:

Похожие статьи:


Оставить комментарий




Подписаться, не комментируя -