webpack 移動端 CSSpx 自動轉換成 rem

CSS px to rem

分辨率不同

瀏覽器的分辨率都是不一樣的

過去

在過去，我們都是靠媒體查詢來實現響應式布局

這里有個缺陷，就是需要寫多套匹配樣式的代碼

@media screen and (max-width: 980px) {
  .header {
    width: 900px;
  }
}

@media screen and (max-width: 480px) {
  .header {
    height: 400px;
  }
}

@media screen and (max-width: 350px) {
  .header {
    height: 300px;
  }
}

rem 是什么？

W3C 對 rem 的定義：font-size of the root element

rem 和 px 的對比:

• rem 是相對單位
• px 是絕對單位

移動端 CSS px 自動轉換 rem

使用 px2rem-loader

頁面渲染的時候計算根元素的 font-size 值

• 可以使用手機淘寶的 lib-flexible庫
• https://github.com/amft/lib-flexible

npm install px2rem-loader -D
npm install lib-flexible -S

module.exports = {
  module: {
    rules: [
      test: /\.less$/,
      use: [
      	'style-loader',
      	'css-loader',
      	'less-loader',
      	{
      		loader: 'px2rem-loader',
      		options: {
      			remUnit: 75,
      			remPrecision: 8
      		}
      	}
    	]
    ]
  }
};