em,rem怎么用

466 阅读1分钟

rem是实现自适应布局的常用方法。

rem 以根元素字体大小为基准,font size of root element
em 以父元素字体大小为基准

<html>的字体大小为14px,1rem就等于14px,2rem就等于28px

设置根元素<html> font-size属性值的方式:

  1. 通过js读取屏幕宽度,根据宽度计算对应的尺寸并设置根元素font-size值。 一般项目以320px的屏幕为基准,设置font-size为12px。

防止设置<html>font-size造成页面抖动,这部分代码放在header底部加载,并内联到html文档中。

  1. 媒体查询

通过CSS3媒体查询,不同的屏幕设置不同的<html>字体大小。

html {
    font-size: 62.5%
}

@media only screen and (min-width: 481px) {
    html {
        font-size:94%!important
    }
}

@media only screen and (min-width: 561px) {
    html {
        font-size:109%!important
    }
}

@media only screen and (min-width: 641px) {
    html {
        font-size:125%!important
    }
    
    body {
        max-width: 640px
    }
}

项目中pxrem的计算可以借助工具完成:

  • sass-rem
  • webpack项目可以使用 px-to-rem-loader