rem的使用及详解

rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

兼容性：

目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。

两种rem适配方式

一、原生手写方式

1.	window.onresize=function(){
    rem()
    //1rem=fontSize
}
    function rem(){
 	let hh=document.documentElement.clientWidth  //html的宽度
 	let bh=document.body.clientWidth  //body的宽度
 	let h=hh||hb  //屏幕宽度
   
  document..documentElement.style.fontSize=(h/750*100)+'px'
}

二、安装适配方式

• postcss-pxtorem是一款 postcss插件，用于将单位转化为 rem

• lib-flexible 用于设置 rem 基准值

  安装并引入插件

  1.安装依赖

  1. cnpm install lib-flexible postcss-pxtorem --save-dev
  

  2.main.js导入

  1. //移动端适配
  2. import ‘lib-flexible/flexible’;