html - 屏幕中的px单位宽度分辨率问题

Question

在这个设置中

<div class="a">

</div>

.a {
   width: 400px;
   height: 600px;
}

1. 如果屏幕分辨率为 1600*1200，那么 div 的宽度会是浏览器屏幕的 25% 吗？

2. 如果屏幕分辨率是 4000*2400，那么 div 的宽度会是浏览器屏幕的 10% 吗？

我想永远是 25%。

如果我使用百分比来设置宽度，div当浏览器不是全屏时会自动缩小。

标签： htmlcss

Answer 1

最好的做法是使用以下单位而不是 px 或 % 来使您的 div 或任何元素根据屏幕尺寸响应“视口”。视口宽度 (vw) 视口高度 (vh) — 此单位基于视口的高度。1vh 的值等于视口高度的 1%。视口宽度 (vw) — 此单位基于视口的宽度。1vw 的值等于视口宽度的 1%。例如宽度：40vw；高度：60vh；

这将解决您的问题。您也可以在定义字体大小时使用此单元。