vue 移動端適配 ,px自動轉換rem
1.在命令行安裝
npm i lib-flexible --save
2.引入lib-flexible(在main.js內引入)
import 'lib-flexible'
3.添加meta標簽(在項目跟目錄index.html中添加)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4.安裝px2rem-loader
cnpm install px2rem-loader
5. 在build下的 utils.js中，找到generateLoaders 方法，在這里添加
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 64//設計稿寬度/10 或75
}
};
function generateLoaders(loader, loaderOptions) {
var loaders2 = [cssLoader, px2remLoader];
if (loader) {
loaders2.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
}
設計搞一般為750px, 所以remUnit:為75,在寫項目時,可以直接寫px值,會自動轉換為rem.
不打算轉換原始值:
font-size:26px /* no*/ px不轉成rem
font-size:26px px轉成rem
用 無 所 謂 的 態 度 過 好 隨 遇 而 安 的 生 活↗☆
浙公網安備 33010602011771號