如何创建都市用户界面具有响应高度的网页？

Question

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

另一个问题是，如果一起使用多个显示器查看桌面，则宽度将比高度大得多，因此盒子的高度将变小，宽度将变大。

在我所遇到的情况下，有没有一种有效的方法来创建响应式网站？

注意：我不想垂直滚动。

关于有效响应的任何建议或经验？谢谢

Answer 1

以vw开头与小屏幕。]的视图宽度成比例地获得所需的height。>

Then

，在我的示例中查看者超过某个width-1080px之后，使用height将fixed

media query引入元素。

这使元素在小屏幕和extra， EXTRA

宽屏上均能正常工作，并且查看器的垂直大小对其没有任何影响

#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">

尝试这样：

div {
  /* 25% of viewport */
  height: 25vh;
  width: 15rem;
  background-color: #222;
  color: #eee;
  font-family: monospace;
  padding: 2rem;
}
<div>responsive height</div>

*{
    margin:0;
    padding:0;
   }
.side-box {
                background:red;
                width:250px;
                height:100vh;
              }

<div class="side-box">
    </div>

Answer 2

尝试这样：

Answer 3