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。

然后，在我的示例中查看者超过某个width - 1080px之后，使用{向该元素引入已修复 height {3}}

这使得该元素适用于小型和额外的 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

＆＃13;

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

＆＃13;

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

＆＃13;

使Div的高度响应

3 个答案: