postcss-px 2 rem構成

2198 ワード

まずpostcss-plugin-px2remを取り付ける必要があります

npm install --save-dev postcss-plugin-px2rem

package.jsonで構成可能

var px2rem = require('postcss-px2rem');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function() {
    return [px2rem({remUnit: 75})];
  }
}

一般postcssはファイルpostcss.config.jsに単独で構成することを推奨し、

module.exports = {
  plugins: [
    require('autoprefixer')({ browsers: 'last 2 versions' }),
    require('postcss-px2rem')({remUnit: 75})
  ]
}

REMはルートノードから各サブノードの値を計算するのでルートノードも応答的に変化する.utils/setRem.jsを定義

export default function setRem(baseWidth = 750) {
  const dpr = window.devicePixelRatio;
  const currentWidth = document.documentElement.clientWidth;
  let remSize = 0;
  let scale = 0;
  scale = currentWidth / baseWidth;
  remSize = baseWidth / 10;
  remSize = remSize * scale;
  document.documentElement.style.fontSize = remSize + 'px';
  document.documentElement.setAttribute('data-dpr', `${dpr}`);
}

index.jsに導入すればよい

import setRem from './utils/setRem'
setRem()

cssのtableプロパティ

iPhone 6と6+media query