vue自动将px转换成rem
1.安装lib-flexiblenpm i lib-flexible --save2.引入flexible在项目入口文件main.js中添加如下代码,引入flexibleimport 'lib-flexible'3.安装px2rem-loader(将px转换成rem)npm install px2rem-loader --save-dev4.配置px2rem-l...
·
1.安装lib-flexible
npm i lib-flexible --save
2.引入flexible
在项目入口文件main.js中添加如下代码,引入flexible
import 'lib-flexible'
3.安装px2rem-loader(将px转换成rem)
npm install px2rem-loader --save-dev
4.配置px2rem-loader
在vue-cli生成的文件中,找到以下文件 build/utils.js,如下图添加配置
const cssLoader = {
loader: 'css-loader',
options: {
minimize:process.env.NODE_ENV ==='production',
sourceMap: options.sourceMap,
importLoaders:2
}
}
const px2remLoader = {
loader: "px2rem-loader",
options: {
remUnit: 75
}
}
5.去除index.html中mate标签(一定要注销) 配置适配各种机型
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<script src="https://webapi.amap.com/maps?v=1.4.10&key=8938d3ffbae4c2810ea60b8de046365b"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="320">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<meta name="msapplication-tap-highlight" content="no">
<title>wisdom-app</title>
</head>
6.找到node_modules库(可要可不要)
找到flexible.js(适配ipad)
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
// if (width / dpr > 540) {
// width = width * dpr;
// alert(1)
// }
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
更多推荐
已为社区贡献28条内容
所有评论(0)