rem正确使用姿势，为什么要选择rem？

px：像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑em和rem。

em：继承父级的，假设html的font-size默认为16px，body字体大小定义为50%，那么在body里字体大小就是1em=8px了。可当你又定义了一个div，然后把字体设置成了50%，请问，现在div下的1em等于多少？因为继承了父级的值，现在这个div里的1em=4px，这么嵌套下去的话，抱歉，我数学不好！所有rem就出现了

rem：是em的升级版，rem只会相对html的值，不会受到父级的影响，这样的好处在于：从em里的例子来讲，1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的，所以ie8或以下请无视（始终想不明白，为什么国人至今对微软都放弃的ie这么恋恋不舍）

rem 常见的使用方式

插件使用 postcss-px-to-viewport 官网link： github.com/evrone/post…

rem 也是css3新增的相对单位，它以html元素的font-size为比例：

 /* 设置html元素的字体大小为 16px，即 1rem = 16px */
 html {
     font-size: 16px;
 }
 /* 设置box元素宽 160px，10rem = 160px */
 .box {
     width: 10rem; /* 160px */
 }

移动端设置比例的时候可以自己通过funtion去换算比例。

 const windowWidth = Dimensions.get('window').width;                
 /* 可以通过自己合适的条件来区分调整*/
 export function pxToRem(size) {
     if (PixelRatio.get() >= 3 && Platform.OS === 'ios' && size === 1) {
         return size/16;
     }
     return parseInt(windowWidth / 750 * size * 100, 10) / 100;
 }

css中使用直接引入方法：

    `height: pxToRem(230),`

4.媒体查询，CSS3 中的媒体查询属性 @media 分别为不同屏幕尺寸的移动设备编写不同尺寸的 css 属性

/* <375px */
@media screen and (max-width:375px) { 
  .box {
    width: 100%;
  }
}
/* >=375px and <450px */
@media screen and (min-width:375px) and (max-width:450px) {
  .box {
    width: 90%;
  }
}
/* >=450px */
@media screen and (min-width:450px) {
  .col{
    width: 80%;
  }
}

缺点：元素在不同的@media 中都要重新定义尺寸，代价较高，多一种屏幕尺寸就得多写一遍媒体查询尺寸

5.flexible 阿丽较早的开源移动端适配解决方案，引用flexible后，我们在页面上统一使用rem来布局，创建一个 rem.js 文件

// 封装一个根据屏幕尺寸自动改变 html 的 font-size 大小的函数
const init = function () {
  let clientWidth =
    document.documentElement.clientWidth || document.body.clientWidth;
  // 设计图尺寸是 750px，这样 *20 之后，1rem 就等于 20px;
  const fontSize = (clientWidth / 750 * 20);
  document.documentElement.style.fontSize = fontSize + "px";
};
init();

window.addEventListener("resize", init);
export default init;

然后在main.js中引入使用了，但是需要自己手动的将px 转换成rem，比较繁琐。

移动端响应式

rem正确使用姿势，为什么要选择rem？

rem 常见的使用方式