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操纵Cookie实现购物车程序
Nov 23 Javascript
JS之小练习代码
Oct 12 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 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环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
Prototype Hash对象 学习
2009/07/19 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
英国健身专家:WIT Fitness
2021/02/09 全球购物
班主任高考寄语
2015/02/26 职场文书
签订劳动合同通知书
2015/04/16 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫