美文网首页Web前端开发
rem布局原理深度理解(以及em/vw/vh)

rem布局原理深度理解(以及em/vw/vh)

作者: 暴躁肥猫 | 来源:发表于2019-11-29 11:36 被阅读0次

    转自:https://www.cnblogs.com/leaf930814/p/9059340.html

     1、em

    em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小——MDN

      比如父元素font-size:12px;

      自身元素如果写成:font-sise:2em;则自身元素用px表示就是24px(相对父元素字体大小);

      但是自身元素设置:width:2rem,那么自身元素用px表示就是48px(相对自身字体大小);

    2、rem

    rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小——MDN

      比如根元素(html)设置font-size=12px; 非根元素设置width:2rem;则换成px表示就是24px;

      如果根元素设置成font-size=1rem;则根元素换成px就是相对于初始字体大小,一般是12px;

    3、vm/vh

    vw : 视口宽度的 1/100;vh :视口高度的 1/100 —— MDN

      在pc端,视口宽高就是浏览器得宽高;

      在移动端,这个还不太一样,不过一般设置:

    1<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    关于rem:

    rem是一种弹性布局,它强调等比缩放,100%还原。它和响应式布局不一样,响应式布局强调不同屏幕要有不同的显示,比如媒体查询。

    关于em:

    上面知道,一旦某个节点的字体大小发生变化,其他节点也随之变化,所以不合适,但是用来处理字体还是绝妙的。

    相关文章

      网友评论

        本文标题:rem布局原理深度理解(以及em/vw/vh)

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