Question

我不知道标题是否完全正确，但我想要的主要是创建一个与屏幕分辨率保持成比例的div元素。例如，如果宽度为1900px，我希望div具有：

width: 1115px;
height: 775px;

但是如果页面的宽度是1050px我想要：

width: 620px;
height: 430px;

我的CSS应该允许什么？

所以我希望宽度是屏幕的百分比，让我们说，高度取决于宽度。

Answer 1

有两种解决方案可以使元素与屏幕成比例，一种取决于您的设置。

您可以使用百分比

width: 20%;

但这仅定义了父元素的百分比，并且不会使宽度和高度成比例

您也可以使用viewport units。这定义了视口的百分比。如果使用视口宽度vw，则可以获得取决于宽度的高度。

height: 10vw; /*10% of viewport width*/
width: 10vw;

你必须要知道这是相对较新的，所以不要忘记在caniuse.com上查看“已知问题”

您还可以设置媒体查询以处理更小或更大的屏幕。

@media (max-width: 300px) {/*10% of 300px is very small, so we change it to 90%*/
 .selector {
   width: 90vw;
 }
}

Answer 2

以下是解决方案，您只需计算所需的宽高比，即宽度/高度：

Answer 3

您可以使用CSS media queries，如下所示：

.selector {
  width: 1115px;
  heigth: 775px;
}

@media (max-width: 1050px) {
 .selector {
   width: 620px;
   height: 430px;
 }
}