html - 如何为地铁用户界面创建具有响应高度的网页？

Question

我想用 HTML 和 CSS 设计 Metro 用户界面，我想在不同的设备上改变盒子的高度。我使用百分比表示宽度。我知道它也可以用于高度。但是如果我在高度中使用百分比，如果你垂直缩小浏览器，高度会越来越小。

另一个问题是，如果使用多个显示器一起查看桌面，宽度会比高度大很多，所以盒子的高度会变小，宽度会变大。

在我的情况下，是否有一种有效的方法来制作响应式网站？

注意:我不想垂直滚动。

有任何关于以有效方式做出响应的建议或经验吗？谢谢你

Answer 1

从 vw 开始以获得与小屏幕的 View 宽度成比例的所需高度。

然后，在查看器超过某个宽度后——在我的例子中是1080px，引入一个fixed height使用 media query 到元素.

这使得该元素在小屏幕和超宽超宽屏幕上都能很好地工作，并且查看器的垂直尺寸不会对其产生任何影响

#logo {
  height: 26vw;
  width: auto;
}

@media screen and (min-width: 1080px) {
  #logo {
    height: 300px;
  }
}

<img id="logo" src="https://s.w.org/about/images/logos/wordpress-logo-notext-rgb.png">