Объяснение всех 24 единиц CSS Viewport

Раньше CSS имел только 4 устройства просмотра, которые вы должны были распознать, и что они были способны охватывать довольно много каждого вообразимого варианта использования. Однако время шло, и эпоха изменилась, и этих четырех устройств просмотра стало недостаточно для решения всех задач. Из-за этого CSS предоставил 20 дополнительных устройств просмотра, что кажется большим, однако их можно разделить на шесть основных устройств просмотра с тремя точными модификаторами, что дает нам полные 24 комбинации.

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

Оригинальные четыре блока просмотра

Преобладающими устройствами области просмотра CSS являются vw, vh, vmin и vmax. Скорее всего, вы привыкли к этим устройствам или видели их раньше, поэтому я постараюсь быть максимально кратким, объясняя их.

vw:

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

Например, если вы написали 10vw, это будет составлять 10% ширины вашего окна просмотра.

Окно просмотра — это просто сложная фраза для масштаба вашего экрана, поэтому, если вы работали на огромном вычислительном устройстве шириной 1920 пикселей, 10vw может составлять 192 пикселя.

Если вы использовали мобильный смартфон с шириной 300 пикселей, то 10vw лучше всего соответствует 30 пикселям.

vh:

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

вмин и вмакс:

Vmin и vmax составляют самое минимальное измерение окна просмотра.

Например, если вы использовали мобильный смартфон, это 300 пикселей в ширину и 800 пикселей в высоту, vmin может представлять собой ширину области просмотра, а vmax может представлять собой пик устройства. Эти устройства очень полезны, если вам нужна длина и детализация, основанные исключительно на наименьшем/наибольшем размере экрана.

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

Два новых блока просмотра

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

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

vi:

vi расшифровывается как Viewport Inline и представляет внутреннее направление вашего документа. В горизонтальном направлении письма это соответствует ширине вашего окна просмотра, а в вертикальном направлении письма это высота вашего окна просмотра.

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

vb:

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

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

Модификаторы единиц измерения видового экрана

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

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

Это модификаторы s, l и d. Чтобы применить модификатор, вы просто хотите разместить модификатор после разновидности и перед единицей, например 10svw. Это предлагает нам четыре общих сочетания для каждого из 6 единиц области просмотра: