解决方案：使用rem插件
1、安装两个插件 屏幕自适应插件 npm i amfe-flexible --save 把px转成rem的插件 只能在css文件里面写 style里面的 npm i postcss-px2rem --save
2、main.js引入 import rem from 'amfe-flexible' 为了全局使用rem 插件需要use一下 Vue.use(rem)
3、package.json中添加如下代码： "remUnit":75表示 ui小姐姐给的图 是按照750px这个尺寸设计的 "postcss":{ "plugins":{ "autoprefixer":{}, "postcss-px2rem":{ "remUnit":75 } } }
4、修改了 src路径不需要重启，但是修改了配置项 需要重新启动 npm run serve
5、需要在css中设置样式，在行内样式style里面写无效 .s1{ /* 30px/75=0.4rem */ font-size:30px; }
6、html的根元素 font-size会根据屏幕的变化而变化 但是元素rem值不会 效果：页面的尺寸也会根据屏幕的变化而变化 。
node.getIterator is not a function 问题的解决方法
卸载postcss-px2rem，下载postcss-pxtorem，postcss-pxtorem也是一款postcss插件，用于将css单位转化为rem,用于移动端适配，同时在postcss.config.js设置如下代码，没有这个文件可以自己创建在项目根文件夹下该文件。使用postcss-pxtorem则不需要在package.json中配置"postcss"。
const autoprefixer = require('autoprefixer');
const px2rem = require('postcss-pxtorem');
module.exports = {
plugins:[
autoprefixer(),
px2rem({
rootValue:75,
unitPrecision:5,
propList:['*']
})
]
}
移动端的兼容问题（转载）
问题一：安卓端input输入框会出现键盘弹出遮盖页面输入框的问题，input框无法自动出现在可视区
mounted() {
window.addEventListener('resize', this.upForm)
}
methods: {
//对请求的数据格式化成页面需要的数据
upForm(time = 100) {
if (/iphone/i.test(navigator.userAgent)) {
// return
}
if (
document.activeElement.tagName === 'INPUT' ||
document.activeElement.tagName === 'TEXTAREA'
) {
setTimeout(() => {
document.activeElement.scrollIntoViewIfNeeded(true)
}, time)
}
// setTimeout(function() {
// e.target.scrollIntoView({
// block: "center",
// inline: "nearest",
// behavior: "smooth"
// });
// // true:元素的顶端将和其所在滚动区的可视区域的顶端对齐; false:底端对齐。
// }, 200);
},
},
问题二：安卓背景图会随着弹出软键盘上移
<div class="parent">
<div class="children"></div>
</div>
.parent {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
min-height: calc(100% + 1px);
background: url("./../assets/login/back_login.png") no-repeat center;
background-size: cover;
}
.children {
position: relative;
height: 100vh;
overflow-y: auto;
width: 100%;
}
问题三： ios键盘弹出后，在收起的时候底部出现非页面的空白区
<input
class="advice-input"
placeholder="请输入"
@blur.prevent="fixScroll"
v-model="changeAdvice"
/>
fixScroll() {
let u = navigator.userAgent;
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS) {
window.scrollTo(0, 0);
}
}
以上转载自blog.csdn.net/Bynine9/art…
上下拉动滚动条时卡顿、慢
body{ -webkit-overflow-scrolling:touch; overflow-scrolling:touch;}
长时间按住页面出现闪退
element{-webkit-touch-callout:none;}
1px边框
在移动端中，如果给元素设置一个像素的边框的话，那么在手机上看起来是会比一个像素粗的。
解决方法：使用伪类元素模拟边框，使用transform缩放
.a::after{ content: ''; display: block; width: 100%; height: 1px; background: #333; position: absolute;left: 0;bottom: 0; transform: scaleY(0.5) }
