CSS3初识(标签篇)------vw&vh

  • 作者:cyk
  • 朝圣言
  • 时间:2016-12-07 18:12:59
  • 6709人已阅读
 css  小技巧 

在H5下,很多时候需要对某些DIV进行高度或者宽度的设置。这些高度是相对屏幕的。

如果div宽度相对屏幕宽度或者div高度相对屏幕高度的百分比。这些都很好解决

但是如果div宽度相对屏幕高度或者div高度相对屏幕宽度要怎么解决

1、JS:

最简单的方法,但是弊端也很明显,存在重绘的问题。

2、vw&vh

CSS3中引入这2个单位。

vw-------相对屏幕宽度

vh-------相对屏幕高度


范例:

<style>
.demo1{
    height:10vw;
    width:10vh;
    line-height:10vw;
    background:#f00;
}
.demo2{
    height:100vw;
    width:30vh;
    background:#ff0;
    line-height:100vw;
}
</style>
<div class="demo1">demo1</div>
<div class="demo2">demo2</div>



发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Top