CSS => Единицы длины

Вступление

Измерение расстояния по CSS - это число, за которым следует единица длины (px, em, pc, in, ...)

CSS поддерживает несколько единиц измерения длины. Они абсолютные или относительные.

Синтаксис

единичная стоимость
1em

параметры

Единица измерения	Описание
%	Определить размеры в терминах родительских объектов или текущего объекта, зависящего от свойства
Эм	Относительно размера шрифта элемента (2em означает в 2 раза размер текущего шрифта)
рем	Относительно размера шрифта корневого элемента
оч.сл.	Относительно 1% ширины окна просмотра *
В.Х.	Относительно 1% высоты окна просмотра *
Vmin	Относительно 1% меньшего размера окна просмотра
Vmax	Относительно 1% увеличенного размера viewport
см	см
мм	миллиметры
в	дюймы (1 дюйм = 96 пикселей = 2,54 см)
ПВ	пикселей (1px = 1 / 96th of 1in)
пт	точек (1pt = 1/72 из 1in)
ПК	picas (1pc = 12 pt)
s	секунд (используется для анимаций и переходов)
Миз	миллисекунды (используются для анимаций и переходов)
бывший	Относительно x-высоты текущего шрифта
ч	Основываясь на ширине нулевого (0) символа
фр	дробная единица (используется для компоновки сетки CSS)

замечания

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

Размер шрифта с rem

CSS3 вводит несколько новых единиц, включая блок rem , который обозначает «root em». Давайте посмотрим, как работает rem .

Во-первых, давайте посмотрим на различия между em и rem .

em : Относительно размера шрифта родителя. Это вызывает проблему усугубления
rem : Относительно размера шрифта корневого или <html> элемента. Это означает, что можно объявить один размер шрифта для элемента html и определить все единицы rem в процентах от этого.

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

10px = 0,625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (базовый)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1,875rem
32px = 2rem

КОД:

html { 
  font-size: 16px; 
}

h1 { 
  font-size: 2rem;          /* 32px */
}

p { 
  font-size: 1rem;          /* 16px */ 
}

li { 
  font-size: 1.5em;         /* 24px */
}

Создание масштабируемых элементов с использованием rems и ems

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

HTML:

<input type="button" value="Button">
<input type="range">
<input type="text" value="Text">

Соответствующий CSS:

html {
  font-size: 16px;
}

input[type="button"] {
  font-size: 1rem;
  padding: 0.5em 2em;
}

input[type="range"] {
  font-size: 1rem;
  width: 10em;
}

input[type=text] {
  font-size: 1rem;
  padding: 0.5em;
}

Возможный результат:

vh и vw

CSS3 представил две единицы для представления размера.

vh , что означает viewport height составляет около 1% высоты окна просмотра
vw , который обозначает viewport width составляет около 1% от ширины окна просмотра

div { 
  width: 20vw; 
  height: 20vh;
}

Выше размер для div занимает 20% от ширины и высоты окна просмотра

vmin и vmax

vmin : относительно 1 процента меньшего размера окна просмотра
vmax : относительно 1 процента большего размера окна просмотра

Другими словами, 1 vmin равно меньшему из 1 vh и 1 vw

1 vmax равен наибольшему из 1 vh и 1 vw

Примечание : vmax не поддерживается в:

любая версия Internet Explorer
Safari до версии 6.1

используя процент%

Один из полезных модулей при создании реагирующего приложения.

Его размер зависит от его родительского контейнера.

Уравнение:

(Ширина родительского контейнера) * (Процент (%)) = Выход

Например:

Родитель имеет ширину в 100 пикселей, а у ребенка - 50% .

На выходе ширина ребенка будет равна половине (50%) родительских , что составляет 50 пикселей .

HTML

<div class="parent">
   PARENT
   <div class="child">
     CHILD
   </div>
</div>

CSS

<style>

*{
  color: #CCC;
}

.parent{
  background-color: blue;
  width: 100px;
}

.child{
  background-color: green;
  width: 50%;
}

</style>

ВЫХОД

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

CSS
Единицы длины

Поиск…