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

Question

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

Answer 1

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

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

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

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

5.1.2. Длина просмотра в процентах: единицы 'vw', 'vh', 'vmin', 'vmax'

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

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

4,3. Проценты: ' <percentage> ' тип

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