理解并使用CSS3中的单位rem vh vw vmin vmax

站长手记 作者: 2024-08-28 13:35:01
rem vh vw vmin vmax做为CSS3中的新单位,对CSS3的单位的使用了解是非常重要的,也许你会遇到一个问题可以通过css的这些单位得到解决,同时对于rem,vh和vw,百分比等都是我们做自适应网站常用的方法。

rem

body {  font-size: 14px; }  
div {  font-size: 1.2rem; // calculated at 14px * 1.2, or 16.8px}

em

<body>
       <div class=”div1”>
              <div class=”div2”>
                     <div class=”div3”>
               </div>
        </div>
</div>
</body>
<style>
body{ font-size:14px; }
div1{font-size:1.2em};//1.2*14PX
div2{font-size:1.2em}//1.2*1.2*14px
div3{font-size:1.2em}//1.2*1.2*1.2*14px
</style>

vh 和 vw

vw:视窗宽度的百分比
vh:视窗高度的百分比
.demo{//一行css实现同屏幕等高,等宽
  height: 100vh;
  width:100wh;
}

vmin 和 vmax

vmin:当前较小的vw和vh
vmax:当前较大的vw和vh

总结:

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_70147.html
CSS3 rem vh vw vmin vmax