Правильно использовать CSS3 VW и VH в 2016 году для быстро реагирующих и перекрестных сайтов

Question

Я блуждал, если в 2016 году правильное время и место для использования css3 vw & vh единиц для создания чувствительных сайтов, из моего опыта это самый простой способ чтобы это произошло ... но я не видел почти нигде не используя эту технику. Почему это так? И если у вас есть лучший способ делать отзывчивые сайты, просьба поделиться ...

Answer 1

VH и VW относятся к высоте/ширине окна просмотра, поэтому они идеально подходят для масштабирования элементов на основе размера видового экрана.

Например, если вы хотите, чтобы расположение двух столбцов указывало, что ширина каждого столбца как 50vw будет работать хорошо. Согласно Can I Use поддержка браузера хороша, если вам не нужно использовать vmax.

Масштабирование - это один из аспектов отзывчивого дизайна, другой - изменение макета страницы.
Как указано ниже, George Chanturia ниже, следующие комментарии относятся к адаптивному дизайну, а не к отзывчивому дизайну.

Допустим, вы хотели макета 2 столбца, чтобы свернуть в один столбец на смартфонах вы, вероятно, хотите использовать медиа-запросы и пиксели или бэр или СЭМ

например

@media only screen and (max-width: 25em) { 
... 
} 

или

@media only screen and (max-width: 400px) { 
... 
} 

Конечно, вы можете использовать VM и VW внутри этих медиа-запросов, но это не функция, которую вы можете проверить в реальном запросе на медиа.

Надеюсь, что это поможет.