On Height CSS响应灵敏

On Height CSS responsive-ness

本文关键字：响应 CSS Height On      更新时间：2023-09-26

我正在尝试模仿这个网站。

https://elrumordelaluz.github.io/csshake/

每种颜色都是不同的部分，所有部分都基于屏幕的高度。有没有办法通过复制demo.css来实现这个w/out？只需要一个简单的基本实现即可。

这对你有用吗？https://jsfiddle.net/0ds7fLce/vh单位是CSS3规范的一部分，它表示视口高度的百分比。

.myclass {
    height: 100vh;
}

应该做这个把戏。

如果你想要某人正在观看的屏幕的确切高度，你可以在CSS属性"height"中使用"vh"，意思是视图高度。然后，如果你想让每个部分都有不同的颜色，你会想给每个部分添加一个不同的类或id，这样你就可以在CSS中为每个部分添加专门的代码。您还希望将"width:100%"添加到"body"和每个"div"中，以便它使用浏览器的整个宽度。

假设你有3个部分，每个部分都需要不同的颜色，看起来像这样：

#example-div1 {
  height:100vh;
  width:100%;
  background-color:#fff;
}
#example-div2 {
  height:100vh;
  width:100%;    
  background-color:#555;
}
#example-div3 {
  height:100vh;
  width:100%;  
  background-color:#111; 
}

我认为使用百分比而不是vh更好，因为旧的浏览器支持：

http://codepen.io/yonimor/pen/MKoGBj

<div class="first"></div>
<div class="second"></div>
html, body {
  height: 100%;
}
.first {
  height: 100%;
  background: red;
}
.second {
  height: 100%;
  background: yellow;
}
相关文章：