vue postcss-pxtorem与设计稿

postcss-pxtorem导入后直接postcss.config.js文件中作为plugins，可以让css中出现的px变为rem：

//postcss.config.js
module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 75,//会把css中的px除以这个数变为rem，即75px变为1rem，150px变为2rem
      unitPrecision: 6,//px变为rem后保留的小数位数
      propList: ['*'],//对哪些属性生效，未被匹配的属性不会把px替换为rem
      selectorBlackList: [],//选择器黑名单，即该名单中的px不被替换为rem
      replace: true,//
      mediaQuery: false,//媒体查询( @media screen 之类的)中不生效
      minPixelValue: 6 //px小于6px时不替换为rem
    })
  ]
};

//css文件中
html{ font-size:10vw; }

官方文档

目的类似于一种极低成本的Android屏幕适配方式，即我们设计人员给出的设计稿宽为750px，如何适配到760px、780px、800px等宽度的不同机型里面。
今日头条安卓方案中通过修改dpi、density，使设计稿宽度方向上比例缩放，展示在不同宽度的手机上，取的良好效果。前端则通过rem以达到相同效果。

配合

假定设计稿为750px宽，不管高度(高度方向可能变为上下滑动，但这是可以接受的)，进行宽度适配
1.首先是vw单位，100vw宽就是整个屏幕宽度。由于设计稿中的单位都是px，因此比如设计稿中一个50px宽的控件，占据设计稿的 50/750 =6.6667%，因此我们可把该控件的宽度修改为6.6667vw，其他控件同理，即可完成宽度适配。但是，设计稿中有很多元素，人工换算成vw很蠢，不容易对照设计稿进行编程。

2.借助css的rem单位和postcss-pxtorem，我们可以直接在代码中使用设计稿的50px作为宽度单位，无需人工替换。参照上面的代码，具体算法分析如下：
(1)根据html样式html{ font-size:10vw; }，可知我们定义了1rem=10vw，即10rem=100vw
(2)整个屏幕宽100vw，我们设计稿宽750px，即我们希望750px=100vw=10rem。因此可知rootValue=750/10=75，去把rootValue设置为75。看上面代码的注释，也就是此时css中的750px，除以75后变为10rem(即100vw);50px除以75后变为0.666667rem(即6.66667vw)。
(3)最终效果，把750px在宽度方向上放缩至等于设备宽度，完成屏幕适配，同时可让我们在代码中仍然使用和设计稿相同的px作单位。
(4)为什么不是：px to vw直接把px换成vw，而是：把px换成rem同时定义1rem=*vw这样子呢？
可能是有时候不一定会采用1rem=10vw这种设定，而是:

@media screen(min-width=320px){ html{font-size:16px;} }
@media screen(min-width=480px){ html{font-size:18px;} }

所以为了框架的适用性，没有直接px to vw，而是px to rem，让开发者自己调整1rem=?来更灵活的完成适配。

3.练习:假定设计人员的设计稿为600px。
解：很随意的，我们这个时候定义1rem=100vw，即html{font-size:100vw;}
让设计稿宽度等于设备宽度，即600px=100vw=1rem，因此rootValue=600/1=600。此时css中600px变为1rem(100vw);60px变为0.1rem(10vw)，宽度上比例缩放了，直接把设计稿中宽度的px用作css的宽度即可。

最后编辑于：2019.04.24 11:46:27