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 相关文章推荐
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
微信小程序实现图片上传
May 23 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 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
利用PHP制作简单的内容采集器的原理分析
2008/10/01 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
IE iframe的onload方法分析小结
2010/01/07 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
python cookielib 登录人人网的实现代码
2012/12/19 Python
分享Python文本生成二维码实例
2016/01/06 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
python去除字符串中的换行符
2017/10/11 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
HTML5新增加的功能详解
2016/09/05 HTML / CSS
怎样写留学自荐信
2013/11/11 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
openstack云计算keystone组件工作介绍
2022/04/20 Servers
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL