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

  • 作者:cyk
  • 朝圣言
  • 时间:2016-12-07 18:12:59
  • 6836人已阅读
 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>



本文标题:CSS3初识(标签篇)------vw&vh
本文链接:https://www.imcyk.com/post/88.html
作者授权:除特别说明外,本文由 cyk 原创编译并授权 莉丝前端 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论:

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

Top