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 包含在内。所以查询将始终被使用。
嗯,我一直在做一些网站。 我注意到,大多数情况下,当人们使用媒体查询时,他们使用固定的 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 包含在内。所以查询将始终被使用。