Question

也可以使它始终水平和垂直居中，宽度始终比高度1.5x大。这是一个例子。我的代码的高度没有响应。

HTML

<body>
    <div id='box'></div>
</body>

CSS

body{
  border: 3px solid black;
}
#box{
   border: 3px solid red;
   width:60vw;
   height: 40vw;
   vertical-align: middle;
   margin:0 auto;
}

Answer 1

你可以选择你的风格和flexbox这样的小提琴： https://jsfiddle.net/s1rsjbn2/ 在两个看起来像平板电脑和移动设备的屏幕上使用#box全宽只需使用媒体查询来设置

#box{width:100vw;height:66.666667vw;}