webpack 移动端自适应方案（px to rem/vw）

分享技术，让快乐不再困难...

本文提供三个方案，从简到繁，目前项目使用方案三

一、自定义rem方案（简单暴力）

在html文件的head标签内添加如下代码

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
 <script>
      var deviceWidth = document.documentElement.clientWidth;
      if(deviceWidth > 640) deviceWidth = 640;
      document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
</script>

其中7.5为设计稿输出的宽度/100，如果设计稿是一倍图，则改为3.75即可
使用过程只需按照设计稿的宽高/100(如字体是24px,写样式的时候则为.24rem)

绘制1px的边框时，使用0.01rem在andriod webview以及部分低版本ios webview 会看不到，请直接使用1px，并且使用transform: scaleY(0.5)进行缩放

二、通过淘宝flexible.js实现rem自适应

1）、安装lib-flexible和postcss-px2rem：

cnpm install lib-flexible postcss-px2rem -D

2）、在项目入口文件main.js 引入

import 'lib-flexible/flexible'

3）、在html文件的head标签内添加如下代码

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no,width=device-width">

4）、px转化为rem，在webpack.dev.conf.js的plugins里添加代码：

new webpack.LoaderOptionsPlugin({
  vue: {
    postcss: [require('postcss-px2rem')({remUnit: 75})]
  },
})

remUnit的值代表了1rem对应的px值，一般750的设计图就设置成75
***1px的边框在转化为rem时，在andriod webview以及部分低版本ios webview 会看不到。处理方法：
如若需要原样输出，则在后面加上注释/ * no * /

.border_style{
    border-color: @border_color;
    border-style: solid;
    border-width: 1px;/*no*/
}

三、使用vw来实现自适应
1）、在html文件的head标签内添加如下代码

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no,width=device-width">

2）、安装开发、运行依赖

cnpm install -D postcss-import postcss-url cssnano-preset-advanced 
cnpm install -S postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano postcss-viewport-units

**各个依赖功能详情请查看 https://juejin.im/entry/5aa09c3351882555602077ca
3）、新建并且配置 .postcssrc.js文件

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {}, 
      "postcss-write-svg": {
        utf8: false
      },
      "postcss-cssnext": {},
      "postcss-px-to-viewport": {
        viewportWidth: 750,  //视窗的宽度，对应的是我们设计稿的宽度，一般是750
        viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
        unitPrecision: 3,       // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
        viewportUnit: ‘vw‘,     // 指定需要转换成的视窗单位，建议使用vw
        selectorBlackList: [‘.ignore‘, ‘.hairlines‘],  // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
        minPixelValue: 1,       // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
        mediaQuery: false       // 允许在媒体查询中转换`px`
      }, 
      "postcss-viewport-units":{},
      "cssnano": {
        preset: "advanced",
        autoprefixer: false,
        "postcss-zindex": false
      },
  }
}

4）、vw的兼容处理（有些手机不支持vw单位）

cnpm  install  -S  viewport-units-buggyfill

接着在项目的入口文件（如：main.js）中，加入

let hacks = require(‘viewport-units-buggyfill.hacks‘);
require(‘viewport-units-buggyfill‘).init({
  hacks: hacks
});

本文章只提供webpack配置部分，如使用gulp用户，思路相同具体实现可自行google....

最后编辑于：2018.05.15 18:20:28