重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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)
  }
 }

总结要修改的地方

vue中移动端适配的示例分析

添加位置.png

5、重启

npm run dev  // 重新运行

以上是“vue中移动端适配的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前文章:vue中移动端适配的示例分析
网页地址:http://cqcxhl.com/article/pdgdps.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP