移动端rem转换的办法和策略

1、通过css3设置html font-size标准来转换

1rem等于html根元素设定的font-size的px值，假如我们在css里面设定下面的css。

html{font-size:14px}

那么后面的CSS里面的rem值则是以这个12来换算，例如设定一个div宽度为3rem,高度为2rem.则它换算成px为width:36px.height:24px，同理，假如一个设计稿为宽度36px,高度为24px，则换成成rem，则是36/14=3rem，24/14=2rem。

这种方式是最简单的，但是并不推荐，因为不好控制。

2、通过JS实时监听屏幕大小变化，通过实时计算来实现比例的转换

直接上代码

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
      if (clientWidth > 750) {
        docEl.style.fontSize = 50 + 'px';
      }
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

其中750是设计稿宽度。如果设计稿宽度是640就改为640就可以了。100是换算比例。比如1rem=100px这样来换算的。自己可以换算比例。这种方式监听浏览器宽度大小实时相应。

推荐使用

3、通过postcss插件postcss-adaptive 和 webpack 配置一劳永逸解决px2rem问题

webpack配置如下

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
      ]
    }, {
      test: /\.(png|jpg|gif)$/,
      use: [
        'url-loader?limit=20000&name=[name]-[hash].[ext]&outputPath=images/',
        'image-webpack-loader'
      ]
    }, {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: ['file-loader']
    },
    {
      test: /\.js$/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['latest']
        }
      },
      exclude: '/node_modules/',
      include: '/src/',
    }
  ]
}

在webpac.config.js同级目录下面简历一个postcss的配置文件：postcss.config.js，并且做如下配置

module.exports = {
  plugins: {
    'postcss-import': {},
    'autoprefixer': { browsers: ['ie>=8', '>1% in CN'] },
    'cssnano': {},
    'postcss-adaptive': { remUnit: 75, autoRem: true }
  }
}

强烈推荐使用，一劳永逸，直接通过postcss的postcss-adaptive插件，会帮我们自动计算比例大小，比例大小可以自己设定。写样式文件的时候，直接就可以写px单位就可以了。最后会按照比率自动打包编译为rem单位；

强烈推荐

4、通过webpack 插件 px2rem来实现转换

首先安装插件`npm install px2rem-loader`
然后在webpack中做如下配

{
  loaders: [{ test: /\.css$/, loader: 'style!css!px2rem?remUnit=75&remPrecision=8' }]
}

强烈推荐使用

其他方式请见：移动端rem转换的办法和策略