vue.js实现移动端适配的方法
这篇文章给大家分享的是有关vue.js实现移动端适配的方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
创新互联是一家集网站建设,锡林浩特企业网站建设,锡林浩特品牌网站建设,网站定制,锡林浩特网站建设报价,网络营销,网络优化,锡林浩特网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
vue.js实现移动端适配的方法:1、使用rem布局,在主入口【index.html】,【
】标签内添加相关JS代码;2、使用【lib-flexible】插件实现。
vue.js实现移动端适配的方法:
一、方法一:rem 布局
在主入口:index.html,
标签内添加如下JS 代码:(实现在标准 375px宽度适配下,100px = 1rem。)二、方法二:lib-flexible 插件实现
1、安装插件
npm i lib-flexible --save // 载lib-flexible npm install px2rem-loader // 安装px2rem-loader
2、在main.js中引入lib-flexible
import 'lib-flexible/flexible'
3、在 index.html 中添加:移动适配 meta标签
//注意这两个的区别,建议添加下面的meta,反正点击输入框,页面自动缩放
4、更改配置
在 build/util.js 中 按如下两更改
(1)、将px2rem-loader添加到cssLoaders中
const cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } } const px2remLoader = { loader: 'px2rem-loader', options: { //一般设置75 remUnit: 35 } }
(2)、在generateLoaders方法中添加px2remLoader
function generateLoaders(loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } }
总结要修改的地方
5、重启
npm run dev
// 重新运行
这里需要注意:
1、 lib-flexible:是 rem 的适配插件。(例:750px == 10rem)
2、px2rem-loader :是为了方便在书写CSS时,输入 px 会 自动转为 rem。
3、有时 用 ‘px2rem-loader ’ 插件,发现 rem 转换不正确。可能是开发工具设置了其他的插件转换,将其他的插件转换设置为想要的转换就行。
感谢各位的阅读!关于vue.js实现移动端适配的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
分享文章:vue.js实现移动端适配的方法
浏览地址:http://scyanting.com/article/pcpppe.html