轻松运用rem布局以及rem与em区别

待我称王封你为后i 2021-08-13 12:47 534阅读 0赞

rem 布局的定义：  css(相对单位，是相对于网站根元素的font-size来计算大小，比如说html的font-size:100px,那么设置的0.1rem就是10px,如果没有设html的字体大小，就是依据浏览器的默认字体大小，一般默认是16px，用户可以自行设置，所以在使用rem布局的时候，第一步就是给html设置font-size)

使用场景，一般呢 rem布局是用来适配手机和ipad

rem 布局中的尺寸计算

其实本质上还是等比缩放，一般是基于宽度，假设我们将屏幕宽度平均分成100份，每一份用x表示，x=屏幕宽度/100，如果将x作为单位，x前面的数值就代表屏幕宽度的百分比。

在使用中 我们先将html的font-size设置为100px,然后在去根据这个设置所有布局，都用百分比来计算，例如设计图给的是100px,我们就设置为1rem。实际的htmlfontsize/实际屏幕宽度 = 初次设置的html fontsize/设计尺寸（html的fongt-size设置成100px,为了计算下面的px换算rem更方便）

假如设计稿是按照375的尺寸设置的100px,那么就是

现在要设置的font-size /  此刻屏幕宽度  =  100px / 375

我们只需要用js代码来检测手机屏幕的宽度，当屏幕宽度变化时候重新设置html的font-size，这样之前所有设置的rem都会按比例缩缩放。

示例

html{
    			font-size: 100px;
    		}
    
    		body,h2,h5,a,input{
    			margin: 0;
    			padding: 0;
    			text-decoration: none;
    			outline: none;
    			font-family: PingFangSC-Regular;
    		}
    
    		.header{
    			padding: 0.14rem;
    			background: #37AAA0;
    			font-size: 0.16rem;
    			color: #FFFFFF;
    			text-align: center;
    			font-weight: lighter;
            }

最后呢，就是rem 与 em的区别

rem在没有设置html的font-size的时候是根据浏览器默认字体大小进行计算的，设置了html，就会依靠html的font-size

em是根据自身的font-size进行计算的，有的人会说是根据父级的font-size,，其实是因为font-size具有继承性，如果给自身元素设置了font-size就覆盖了继承父级的字体大小，个人建议设置em的时候需要给自身元素设置font-size,父级会无限向上继承，最终会导致em的计算差强人意。使用场景，用在一段文字的缩进text-indent:2em;我们可以设置2em,首字符缩进两个字符的大小,等类似场景