解决Vue项目的移动端适配问题
移动端适配有很多种方案,如flex布局,百分比布局,响应式布局,vw布局;我个人比较喜欢的是rem和vw,当然最喜欢的是rem适配方案,因为它的兼容性更佳!
参考:https://blog.csdn.net/weixin_41967475/article/details/109339844
一、基础知识
在进入正文之前,先简单了解一下什么是手机适配?什么是rem?什么是vw?
1.什么是手机适配?
答:设计狮制作效果图,程序猿把效果图应用到不同的手机,对不同的屏幕进行界面调整的过程,确保界面不变形,呈现效果图的位置、尺寸、比例。
2.什么是rem?
答:rem是CSS3新增的一个相对单位,它相对根节点< html >字体的大小。rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小。
3.什么是vw?
答:vw是viewpoint width的简称,即视窗宽度,1vw相当于视窗宽度的1%,100vw相当于视窗宽度的100%。
二、rem适配方案
1.先用vue-cli 手动快速构建一个前端项目
2.在项目中index.html的头部标签加入下面这句话,让不同设备的浏览器的视口取最佳CSS像素
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
3.分别安装 postcss,postcss-pxtorem,postcss-loader,postcss-import,postcss-url一系列插件
cnpm install postcss@8.2.6 --save
cnpm install postcss-import@14.0.0 --save
cnpm install postcss-loader@5.0.0 --save
cnpm install postcss-pxtorem@5.1.1 --save
cnpm install postcss-url@10.1.1 --save
注:最好指定版本号安装
4.在项目根目录下添加 .postcssrc.js 文件
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 32, //根目录的字体大小设为32px
propList: ['*'], //proplist:是那些属性需要转换成rem,全部
minPixelValue: 2 //最小转换单位.2px
}
}
};
5.动态设置根字体大小
在项目中index.html的头部添加下面这段js代码:
<script>
(function () {
function autoRootFontSize() {
document.documentElement.style.fontSize = Math.min(screen.width, document.documentElement
.getBoundingClientRect().width) / 750 * 32 + 'px';
// 取screen.width和document.documentElement.getBoundingClientRect().width的最小值;
// 除以750,乘以32;意思就是相对于750大小的32px;
// 即如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化!
}
window.addEventListener('resize', autoRootFontSize);
autoRootFontSize();
})();
</script>
注:因为设计狮制作的效果图常为750px,为了方便直接读取UI标好的像素大小,根目录的字体大小就设置为32px;
三、vw适配方案
vw是相对屏幕的百分比,所以我们不用再去动态的改变根字体大小了,只需要把设计狮制作的效果图的px大小转换成对应的vw值就完了。
1vw表示1%的屏幕宽度, 即屏幕宽度被分为100份vw
如:750px 设计稿 = 100vw ,1vw = 7.5px
1.先用vue-cli 手动快速构建一个前端项目
2.分别安装 postcss,postcss-pxtorem,postcss-loader,postcss-import,postcss-url一系列插件
cnpm i postcss --save
cnpm i postcss-pxtorem --save
cnpm i postcss-loader --save
cnpm i postcss-import --save
cnpm i postcss-url --save
3.在项目根目录下添加 .postcssrc.js 文件
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": {
utf8: false
},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: 750,//设计稿大小是750px
unitPrecision: 3,//vw值保留的小数点个数
viewportUnit: 'vw',
selectorBlackList: ['.ignore', '.hairlines'],
minPixelValue: 1,
mediaQuery: false
},
"postcss-viewport-units": {},
}
}
布局时各元素的尺寸值都是根据设计稿标注的尺寸计算出来,由于html的font-size是动态调整的,所以能够做到不同分辨率下页面布局呈现等比变化,即适配的本质就是根据手机屏幕尺寸基于百分比进行缩放。