详解vue中移动端自适应方案
方案1:
直接引入js (自己写的动态改变fontsize的js)
functionhtRem(){ varww=document.documentElement.clientWidth; if(ww>750){ ww=750; } document.documentElement.style.fontSize=ww/7.5+"px"; } htRem(); window.onresize=function(){ htRem(); };
在main.js中import引入即可
方案二:手淘的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,设计稿量多少就可以写多少了,舒服多了。
以上所述是小编给大家介绍的vue移动端自适应详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!