В чем разница между% и vw в css?

Question

1vw = 1%, поэтому, если они на 100% взаимозаменяемы, почему они оба существуют? Я чувствую, что% зависит от размера тега обертки, но vh всегда зависит от размера окна независимо от размера тега обертки. Спасибо,

Answer 1

Они не обязательно взаимозаменяемы.

Поведение будет в основном зависеть от позиции элемента в DOM, так как это определит, что представляет собой элемент, содержащий блок. Если элемент имеет ширину 100%, он будет иметь ширину 100% содержащего блока шириной. Если элемент имеет ширину 100vw, он будет иметь ширину 100% ширины вида viewport ширины (видовое окно может не быть элементом, содержащим элемент, но единицы измерения в окне просмотра всегда будут относиться к окну просмотра).

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

ВЭкран-процентная длина всегда будет по отношению к их initial containing block, который является видовым экраном:

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

окно просмотра-процентный длины по отношению к размеру initial containing block. Когда изменяется высота или ширина исходного содержащего блока, они соответственно масштабируются.

В то время как единицы на основе процентных собирается быть относительно своего родительского элемента (то есть, их содержащего блока), который может произойти, чтобы быть элемент body/html, и в этом случае они будут похожи на вьюпорт-процентные длины ,

4.3. Percentages: the ‘<percentage>’ type

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