vue 移动端适配方案详解


Posted in Javascript onNovember 15, 2018

一、方法一:rem 布局

在主入口:index.html,<head> 标签内添加如下JS 代码:(实现在标准 375px宽度适配下,100px = 1rem。)

<script>
  (function () {
   // 在标准 375px 适配下,100px = 1rem;
   var baseFontSize = 100; 
   var baseWidth = 375;

   var set = function () {
    var clientWidth = document.documentElement.clientWidth || window.innerWidth;

    var rem = 100;
    if (clientWidth != baseWidth) {
     rem = Math.floor(clientWidth / baseWidth * baseFontSize);
    }

    document.querySelector('html').style.fontSize = rem + 'px';
   }
   set();

   window.addEventListener('resize', set);
  }());
  
 </script>

二、方法二: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 name="viewport" content="width=device-width,initial-scale=1.0">
//注意这两个的区别,建议添加下面的meta,反正点击输入框,页面自动缩放
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

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  // 重新运行

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
React-Native之定时器Timer的实现代码
Oct 04 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 #Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 #Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 #Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 #Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 #Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 #Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 #Javascript
You might like
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
JavaScript定义类的几种方式总结
2014/01/06 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
Python实现的读写json文件功能示例
2018/06/05 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
Python箱型图处理离群点的例子
2019/12/09 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
房地产销售员的自我评价分享
2013/12/04 职场文书
军训教官感言
2014/03/02 职场文书
公司晚会策划方案
2014/05/17 职场文书
奉献演讲稿范文
2014/05/21 职场文书
素质教育标语
2014/06/27 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
运动会运动员赞词
2015/07/22 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers