vue移动端适配方案详解

一、方法一：rem布局

在主入口：index.html，head标签内添加如下射流研究…代码：(实现在标准375px宽度适配下，100px=1rem。)

脚本（函数(){ //在标准375px适配下，100px=1 remvar base font size=100 var base width=375 var set=function(){ var client width=document。文档元素。客户端宽度| |窗口。内部宽度；var rem=100if (clientWidth！=基础宽度){ rem=数学。地板(客户端宽度/基础宽度*基础字体大小)；}文档。queryselector(' html ')。风格。font size=rem ' px} set()；窗户。addeventlistener(' resize '，set)；}());/script二、方法二：lib-灵活插件实现

1、安装插件

NPM自由党灵活-保存/载lib-flexiblenepm安装px2 mrem-加载程序/安装px2rem-loader2、在main.js中引入自由灵活

导入灵活/灵活’3、在index.html中添加：移动适配自指的标签

元名称="视口"内容="宽度=设备宽度，初始比例=1.0"//注意这两个的区别，建议添加下面的meta，反正点击输入框，页面自动缩放元名称=“视口”内容=“宽度=设备宽度，用户可缩放=否，初始比例=1.0,最大比例=1.0,最小比例=1.0'4,更改配置

在build/util.js中按如下两更改

(1)、将px2 rem-装载机添加到cssLoaders中

const CSS加载器={加载器： ' CSS-loader '，选项： {最小化：进程。ENV。node _ ENV==' production '，源映射：选项。源地图} } const Px2 rem加载程序={加载程序： ' Px2 rem-loader '，选项3360 {//一般设置75 remUnit: 35 } }(2)、在发电商方法中添加px2remLoader

函数生成器加载器（加载器，加载选项){ const loaders=options。usepostscs？[cssLoader，postcssLoader，px2remLoader] : [cssLoader，Px2remloader]if(loader){ loaders。push({ loader : loader '-loader '，options 3360对象。分配({ }，loaderOptions，{源映射3360选项。源地图})})}//在指定该选项时提取CSS(在生产构建期间就是这种情况)if(选项。提取){返回提取插件。提取({使用：加载程序，回退)concat(加载程序)} }总结要修改的地方

添加位置。巴布亚新几内亚

5、重启

新公共管理运行/dev/重新运行以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。