标签：rate pos nts creat 代码 位置 ipad target ipa
一、方法一
安装1：npm i postcss-px2rem --save -dev
安装2：npm i lib-flexible --save
配置1：入口文件main.js中引入：import ‘lib-flexible‘
module.exports = {
css: {
loaderOptions: {
css: {
// options here will be passed to css-loader
},
postcss: {
// options here will be passed to postcss-loader
plugins: [
require(‘postcss-px2rem‘)({
remUnit: 37.5, //要除以2因为是2倍图，除以2因为第三方插件是1倍的，这里是设计稿的尺寸是750px
}),
],
},
},
},
};
配置3：在项目根目录新建一个rem.js文件，文件里添加以下代码
const baseSize=32
function setRem () {
const scale = document.documentElement.clientWidth / 750
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + ‘px‘
}
setRem()
window.onresize = function () {
setRem()
}
配置4：入口文件main.js中引入：import ‘../rem‘(rem.js文件的位置)
二、方法二
安装1：npm install px2rem-loader --save-dev
安装2：npm i lib-flexible --save
配置1：入口文件main.js中引入：import ‘lib-flexible‘const px2remLoader = { loader: ‘px2rem-loader‘, options: { remUint: 37.5 //根据视觉稿，rem为px的十分之一，375宽度px 37.5rem
}
}
（2）修改generateLoaders方法中的loaders
// 注释掉这一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// 修改为
const loaders = [cssLoader, px2remLoader]
if (options.usePostCSS) {
loaders.push(postcssLoader)
}
然后重新npm run dev，打开控制台可以看到代码中的px已经被转成了rem
<script> /(iPhone|iPad|iPhone OS|Phone|iPod|iOS)/i.test(navigator.userAgent) && (head = document.getElementsByTagName("head"), viewport = document.createElement("meta"), viewport.name = "viewport", viewport.content = "target - densitydpi=device - dpi, width = 480px, user - scalable=no", head.length > 0 && head[head.length - 1].appendChild(viewport)); /(pad|pod|iPad|iPod|iOS)/i.test(navigator.userAgent) && (head = document.getElementsByTagName(‘head‘), viewport = document.createElement(‘meta‘), viewport.name = ‘viewport‘, viewport.content = ‘target-densitydpi=device-dpi, width=480px, user-scalable=no‘, head.length > 0 && head[head.length - 1].appendChild(viewport)); </script>
标签：rate pos nts creat 代码 位置 ipad target ipa
原文地址：https://www.cnblogs.com/panqiaoyan/p/14778766.html
