详解基于vue-cli配置移动端自适应
之前写过一篇关于移动端屏幕适配：移动端屏幕适配的解决，今天来聊一聊基于vue-cli配置的移动端屏幕适配问题。
配方还是一样：手淘的lib-flexible+rem
配置flexible
安装lib-flexible
在命令行中运行如下安装：
npmilib-flexible--save
引入lib-flexible
在项目入口文件main.js里引入lib-flexible
//main.js import'lib-flexible'
添加meta标签
在项目根目录的index.html中添加如下meta
px转rem
实际开发中，我们通过设计稿得到的值单位是px，所以要将px转换成rem再写进样式中。
将px转换成rem我们将使用px2rem这个工具，它有webpack的loader：px2rem-loader
安装px2rem-loader
在命令行中运行如下安装：
npmipx2rem-loade--save-dev
配置px2rem-loade
在vue-cli生成的webpack配置中，vue-loader的options和其他样式文件loader最终是都是由build/utils.js里的一个方法生成的。
我们只需在cssLoader后再加上一个px2remLoader即可，px2rem-loader的remUnit选项意思是1rem=多少像素，结合lib-flexible的方案，我们将px2remLoader的options.remUnit设置成设计稿宽度的1/10，这里我们假设设计稿宽为750px。
//utils.js
varcssLoader={
loader:'css-loader',
options:{
minimize:process.env.NODE_ENV==='production',
sourceMap:options.sourceMap
}
}
varpx2remLoader={
loader:'px2rem-loader',
options:{
remUnit:75
}
}
//...
并放进loaders数组中
//utils.js
functiongenerateLoaders(loader,loaderOptions){
varloaders=[cssLoader,px2remLoader]
//...
修改配置后需要重启，然后我们在组件中写单位直接写px，设计稿量多少就可以写多少了，舒服多了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。