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

Question

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

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

有没有一种有效的方法可以根据我的情况制作响应式网站？

注意：我不想垂直滚动。

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

Answer 1

这样试试：

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

<div>responsive height</div>

Answer 2

从 vw 开始，以获得与 小屏幕的视图宽度成比例的所需 height。

Then, viewer超过某个width - 我例子中的1080px后，引入一个fixed height 使用 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">

Answer 3

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

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

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

how to create a webpage with responsive height for metro user interface?

html

css

height

responsive-design