VUE Vant框架开发移动端自适应问题处理
Vant组件库内部的组件样式都是以PX单位计算的尺寸。由于手机屏幕尺寸大小不一,所以我们一般在开发web移动端的时候不采用PX像素为单位设置宽高等。方式一:将px单位转换成rem单位布局1.下载lib-flexible插件npm i lib-flexible --save2.引入lib-flexible//main.js中引入import 'lib-flexible/flexible'3.安装px
Vant组件库内部的组件样式都是以PX单位计算的尺寸。由于手机屏幕尺寸大小不一,所以我们一般在开发web移动端的时候不采用PX像素为单位设置宽高等。
方式一:将px单位转换成rem单位布局
1.下载lib-flexible插件
npm i lib-flexible --save
2.引入lib-flexible
//main.js中引入
import 'lib-flexible/flexible'
3.安装px2rem-loader
npm install px2rem-loader
4.配置px2rem-loader
在build目录中找到uilt.js,在cssLoaders中增加以下代码
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5
// Vant-UI的官方根字体大小是37.5所以这里也设置了37.5。也可以按照实际的设计稿大小设置成75
// 一般我们拿到的设计稿是750px(二倍图)的。这里设置了37.5后。在写代码的时候也需要按照375px(一倍图)的宽度来写;
//如:将APP的宽度设置为全屏 #app{width:375px};CSS将会自动转换成rem
}
}
同时,在generateLoaders方法中添加px2remLoader
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
配置完之后:运行npm run dev就可以看到效果了;
按照以上的方式配置完成后,虽然可以实现自适应但会发现在PAD上无法自适应,最高的宽度只能到了750px,导致两边有空白。如果我们开发的是公众号和H5网页一般还是需要根据屏幕宽度进行自适应;
1.首先需要看设计稿是否达到了适应PAD的尺寸。如果UI那边只给了750尺寸宽度的设计稿,那么肯定是需要修改下的;
2.不采用自动px转rem插件;
3.新建JS文件rem.js放到components文件下;
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=1024){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 1024) + 'px';
var a =docEl.style.fontSize = 100 * (clientWidth / 1024) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
// 1024代表设计稿的宽度;项目的设计稿宽度是多少 这里就写多少;
4.在main.js中引入
import rem from './components/rem'
5.在index.html中设置meta
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
6.采用rem进行布局;
如设计稿的宽度为1024px。设置成全屏宽;则是 width:10.24rem;
以上就是解决移动端rem自适应问题的方法,大部分项目还是建议采用第一种方法(毕竟自动转)。除非你的项目也必须要求适应pad,在去采用第二种手动转的方法;如果有更好的方法欢迎留言讨论!
更多推荐
所有评论(0)