vue中移动端适配的示例分析
小编给大家分享一下vue中移动端适配的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联建站服务项目包括临洮网站建设、临洮网站制作、临洮网页制作以及临洮网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,临洮网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到临洮省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
一、方法一: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) } }
总结要修改的地方
添加位置.png
5、重启
npm run dev // 重新运行
以上是“vue中移动端适配的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
新闻标题:vue中移动端适配的示例分析
网页地址:http://myzitong.com/article/pdgdps.html