предисловие

В процессе обучения я обнаружил, что в CSS много измерений, которые могут описывать единицы. Напримерpx,em,rem,vwи т.п. Я обычно не вникаю в это, потому что у меня нет времени, а во-вторых, это низкий приоритет в моем списке занятий. Я пытался понять это полностью, и это было отложено до сих пор. А теперь найдите время, чтобы разобраться в этом и полностью понять его.

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

Абсолютная единица длины. Абсолютные единицы длины выражаются как фиксированное значение, которое не изменяется.Не подходит для рендеринга страницы.
- в дюймах
- см внутри
- мм, миллиметр
- pt
- pc
Относительная единица длины. Его единица длины изменяется в зависимости от опорного значения.
- пикс, пиксель
- em, высота шрифта элемента
- %, процент
- rem, размер шрифта корневого элемента
- vm, ширина окна, 1vw = 1% от ширины окна
- vh, высота окна, 1vh = 1% от высоты окна

Физические пиксели (пиксели устройства)

Например, есть картинка, подразделение, наименьшая единица — пиксель. То есть картинка состоит из множества пикселей. Пиксели представляют собой маленькие квадратики.Эти квадратики имеют определенное положение и заданное значение цвета.Цвет и положение квадратиков определяют внешний вид изображения.

Как только устройство произведено, их пиксели уже определены. Разрешение iPhone 5640x1136px, что означает, что экран состоит из 640 строк и 1136 столбцов пиксельных квадратов.

为了理解像素和避免与CSS像素混淆，
可以将物理像素当做物理小方块。
比如iPhone5的像素是640X1136px,可以当做640*1136个小方块。

разрешение

Также называется разрешением, разрешением. Его можно классифицировать по двум направлениям: разрешение экрана и разрешение изображения.

Разрешение экрана. Это точность изображения на экране, которая относится к тому, сколько пикселей может отображать монитор, то есть сколько маленьких квадратов может отображать монитор.
- Чем больше маленьких квадратов может отображать монитор, тем четче изображение и тем больше информации можно отобразить на той же площади экрана.
- Думайте обо всем изображении как о большой шахматной доске, а разрешение выражается как количество пересечений всех меридианов и параллелей. Чем больше квадратов на доске, тем больше фигур можно разместить.
- При постоянном разрешении экрана чем меньше экран дисплея, тем четче изображение, и наоборот, при фиксированном размере экрана чем выше разрешение дисплея, тем четче изображение. (При одинаковом количестве квадратиков чем меньше экран дисплея, тем четче изображение; при одинаковом размере экрана чем больше квадратиков, тем четче графика.)

Пиксель CSS

Единица пикселя CSS также называетсяpx. Это основная единица отображения изображения, не определенная физическая величина, не точка или квадратик, а абстрактное понятие. Так что будьте ясны, когда говорите о пикселяхего контекст!

Чтобы обеспечить единообразие чтения, CSS автоматически настраивается на разных устройствах. То есть код может отображаться на устройствах разного размера, и процесс чтения может быть гарантированно однородным.
По умолчанию пиксель CSS должен быть равен ширине одного физического пикселя.
Но на устройствах с высоким PPI пиксели CSS даже по умолчанию эквивалентны по размеру нескольким физическим пикселям. Например, экран iPhone будет выглядеть лучше и четче, чем экран обычного мобильного телефона.
через браузерctrl +/-Экран можно увеличить или уменьшить, по сути, разрешение экрана регулируется вниз/вверх.ctrl +Экран увеличен, а разрешение уменьшено.
iPhone 6, 7 и 8 — это телефоны с двойным экраном, то есть один пиксель CSS равен 2 физическим пикселям. iPhone 6 Plus — это телефон с тремя экранами, и один пиксель CSS равен 3 физическим пикселям.
Взяв за пример iPhone 6, в черновике дизайна дана картинка шириной и высотой 40*40. В реальной разработке его следует разделить на 2, а ширину и высоту записать как 20х20. Потому что iPhone 6 — телефон с двойным экраном.

em

em — относительная единица длины. Размер шрифта относительно текста внутри текущего объекта. Если текущий размер шрифта встроенного текста не установлен вручную,Затем относительно размера шрифта браузера по умолчанию размер шрифта браузера по умолчанию составляет 16 пикселей..

Итак, 1em = 16px. по умолчанию.

Как использовать их эффективно

В теле объявлен размер шрифта: 62,5%. то есть глобальное объявление1em = 16px * 62.5% = 10px
тогда вы можете поставитьemтак какpxиспользовать. Конечно, в это время,1em = 10px
Если указано в родительском контейнереfont-size:20px, то в подконтейнере1emэквивалентно20px.

rem

единицы rem относятся к размеру шрифтаHTML-элемент, также известный как корневой элемент.

html {
  font-size: 10px; /* 不建议设置 font-size: 62.5%; 在 IE 9-11 上有偏差，具体表现为 1rem = 9.93px。 */
}

.sqaure {
  width: 5rem;  /* 50px */
  height: 5rem; /* 50px */
}

Эм и Рэм

rem — это размер шрифта относительно корневого элемента (html), а em — размер шрифта относительно его родительского элемента.
em до последних трех цифр десятичной точки

<style>
  html{ font-size: 20px; }
  body{ 
    font-size: 1.4rem;  /* 1rem = 28px */
    padding: 0.7rem;  /* 0.7rem = 14px */
  } 
  div{
    padding: 1em;  /* 1em = 28px */
  }
  span{
    font-size:1rem;  /* 1rem = 20px */
    padding: 0.9em;  /* 1em = 18px */
  }
</style>

<html>
  <body>
    <div>   
      <span></span>  
    </div>
  </body>
</html>

В приведенном выше примере обнаружилась интересная ситуация.em 会层层继承父元素的字体大小, легко запутаться в размере шрифта. так что используйте позжеremбудет лучше.

rpx

rpx — это единица измерения размера для апплета WeChat для определения адаптивного размера экрана. Апплет WeChat предусматривает, что ширина экрана составляет 750 пикселей.

Будь то на iPhone 6 или других моделях, ширина экрана составляет 750 пикселей.Для iPhone 6 ширина экрана составляет 375 пикселей.После деления на 750 пикселей, 1ркс = 0,5 пикселей = 1 физический пиксель.

вв и вх

vw, ширина окна, 1vw = 1% ширины окна
vh, высота окна, 1vh = 1% высоты окна
Если высота браузера составляет 900 пикселей, значение, полученное с помощью 1vh, составляет 9 пикселей. Точно так же, если ширина окна дисплея составляет 750 пикселей, значение, полученное с помощью 1vw, составляет 7,5 пикселей.

вмин и вмакс

vmin и vmax — минимальные или максимальные значения между высотой и шириной относительно области просмотра.
Высота браузера составляет 1100 пикселей, а ширина — 700 пикселей, тогда 1vmin — 7 пикселей, а 1vmax — 11 пикселей.
Высота браузера 800px, а ширина 1080px, тогда 1vmin тоже 8px, а 1vmax тоже 10.8px
vmin берет меньшее из ширины и высоты/100
vmax берет большее из ширины и высоты/100

Где это можно использовать

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

.box {
    height: 100vmax;
    width: 100vmax;
}

Справочная статья

Концепция пикселей во фронтенд-разработке

Наиболее полное введение в единицы размера CSS

Общие единицы измерения в CSS3 Разрешение мобильного устройства (наконец-то поймите, почему черновики мобильного дизайна всегда имеют разрешение 640 и 750 пикселей).

Несколько единиц CSS, о которых вам нужно знать

мой блог

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