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 28 Javascript
Javascript 设计模式(二) 闭包
May 26 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 Javascript
在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
PHP4实际应用经验篇(8)
2006/10/09 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
PHP的自定义模板引擎
2017/03/24 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
Python类class参数self原理解析
2020/11/19 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
运动会解说词50字
2014/01/18 职场文书
房屋出售协议书
2014/04/10 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
品德评语大全
2014/05/05 职场文书
房展策划方案
2014/06/07 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书