CSS 带视点的媒体查询

CSS Media Queries with ViewPoints

嗯,我一直在做一些网站。 我注意到,大多数情况下,当人们使用媒体查询时,他们使用固定的 px 值,或者他们使用断点。

所以我想知道在媒体查询中使用视点 (vh/vw) 是否不好,因为到目前为止它们在大多数设备上都有效。但该网站有效 在所有 standard/common 智能手机上。

@media screen and (max-width: 100vw){
  body,html{


  }
}

max-width、min-width、max-height 和 min-height 媒体查询旨在根据视口大小更改样式。无论视口大小如何,max-width 始终为 100vw,max-height 始终为 100vh。因此,使用这些单位的媒体查询不会根据视口大小对样式进行任何更改。

vw 和 vh 基于视口宽度和高度的百分比。它们与 % 相似但不完全相同。一个max-width100就是全部的可视区域。您的查看区域将始终为 100vh x 100vw。 Max-width 包含在内。所以查询将始终被使用。