CSS常用的单位(em/rem、vw/vh、vmin/vmax)

作者: ____雨歇微凉 | 来源:发表于2016-08-06 23:33 被阅读105次

    1、em/rem

    em的大小,取决于自身的字体大小,并乘以em的倍数,代码如下,效果拷贝了自己去试。

    <div style="font-size:14px">em<!-- 14px  --> 
       <span style="font-size:1.4em;">em<!-- (14*1.4)px  -->
          <span style="font-size:1.4em;">em<!-- (14*1.4*1.4)px  -->
             <span style="font-size:1.4em;">em<!-- (14*1.4*1.4*1.4)px  -->
                <span style="font-size:1.4em;">em<!-- (14*1.4*1.4*1.4*1.4)px  -->
                </span>
             </span>
          </span>
       </span>
    </div>
    

    比如做一个按钮 -> 只需要改变字体大小,就能够改变按钮的大小,代码如下:

    <button class="button">按钮</button>
    .button{width:4em; height:2em; font-size:14px;}
    

    比如做一个自定义的组件:

    <div class="template">
       <header class="header">标题</header>
       <section class="section">正文</section>
       <button class="button">按钮</button>
    </div>
    .template{ font-size:24px; height:10em; width:20em; background:gray; padding:0.6em; box-sizing:border-box; }
    .header{ font-size: 2em; font-weight: bold; }
    .section{ font-size:1.4em; height:2em; }
    .button{ width:4em; height:2em; font-size:1.4em; }
    

    接下来值需要改变字体的大小,内部的内容就会跟着自适应,感觉是还不是很哈皮。
    缺点是em不适合嵌套太多层的组件否则每部每次都要计算父节点的大小,那就得不偿失了。

    然后再说rem,rem的大小,取决于网页根节点的大小。

    <div style="font-size:14px">rem
       <span style="font-size:1.4rem;">rem
           <span style="font-size:1.4rem;">rem
             <span style="font-size:1.4rem;">rem
                <span style="font-size:1.4rem;">rem
                </span>
             </span>
          </span>
       </span>
    </div>
    

    个人觉得一个网页用px还是用em还是用rem并不是什么需要纠结的问题,反正都不要钱,完全可以穿插着用,用适合的单位解决适合的问题。

    2、vw/vh

    vw/vh 当前视窗的1% width/height -> 100vw = 100%视窗宽度 || 100vh = 100%视窗高度

    <div style="background:#ccc;width:50vw;height:100px;"></div>

    比如,对初学者而言的一个问题,底部在页面超过屏幕时,自适应文档高度,在404等奇葩页面时,紧贴屏幕底部。

    <body>
       <div class="main">main</div>
       <footer>footer</footer>
    </body>
    <style>
       body,html{ padding:0; margin:0; }
       .main{ min-height: 100vh; background:#ccc; width:100%; }
       footer{ width:100%; height:100px; background:#333; color:#ccc; margin-top:-100px; bottom:0; }
    </style>
    

    缺点:这个底部的高度不能自适应,还有更多的解决方案,如果有兴趣的话,我之后会写的,如果你急着知道的话,也可以给我留言。

    3、vmin/vmax

    vmin/vmax 以当前窗口的最小/最大为百分比,

    <div style="background:#ccc;width:50vw;height:100px;"></div>
    

    这个就不多说了,毕竟用的不太多,个人才疏学浅,暂时也没有用到。
    另外还有ex和eh,具体没有了解太多,据说是基于字体的度量单位,依赖当前设定的字体,感兴趣的可以去问度娘。

    相关文章

      网友评论

        本文标题:CSS常用的单位(em/rem、vw/vh、vmin/vmax)

        本文链接:https://www.haomeiwen.com/subject/ciwojttx.html