vue cli3适配所有端方案的实现


Posted in Javascript onApril 13, 2020

应用场景

页面需要在pc端和移动端同时兼容,以前我的方案都是使用媒体查询来判断当前设备大小,然后写两套或者三套css代码来兼容他们,能达到目的,并且效果不错,但是感觉还是稍微麻烦了一丢丢。后面了解了一下flexable.js脚本,稍作修改,基本可以满足我的需求。

postcss-px2rem

yarn add postcss-px2rem

postcss-px2rem插件可以将px转为rem,需要在vue.config.js(项目没有的话就手动创建一个)中配置插件

// css相关配置
  css: {
    // 启用 CSS modules
    modules: false,
    // 是否使用css分离插件
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          //remUnit这个配置项的数值是多少呢??? 通常我们是根据设计图来定这个值,原因很简单,便于开发。
          //假如设计图给的宽度是750,我们通常就会把remUnit设置为75,这样我们写样式时,可以直接按照设计图标注的宽高来1:1还原开发。
          require('postcss-px2rem')({
            remUnit: 75
          })
        ]
      }
    },
  }

flexible.js

flexible会为页面根据屏幕自动添加标签,动态控制initial-scale,maximum-scale,minimum-scale等属性的值 ===>设备缩放比

所以,在我们的html的header中,就不要之前配置的viewport的meta标签了

<meta name="viewport"
    content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

这种标签flexble会自动帮我们加上。

下面附上修改完后的flexble脚本代码:

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1
  var isMobileDevice = /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent);
  dpr = isMobileDevice ? dpr : 1;
  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    let width = docEl.clientWidth
    // 下面5行为自己加的代码,pc端页面不转rem
    let remUnitConfig = 75
    let viewWidthMax = remUnitConfig * 10
    if (width / dpr > viewWidthMax) {
      width = viewWidthMax * dpr
    }

    var rem = width / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

最后需要在index.html中引入脚本:
flexble.js要和index.html文件同级

vue cli3适配所有端方案的实现

最后在head添加js标签,引入它:

<script src="flexible.js" type="text/javascript" charset="utf-8"></script>

自此,项目就配置完了。

到此这篇关于vue cli3适配所有端方案的实现的文章就介绍到这了,更多相关vue cli3适配所有端内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript 判断客户端浏览器类型代码
Mar 01 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
vue组件内部引入外部js文件的方法
Jan 18 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
RxJS在TypeScript中的简单使用详解
Apr 13 #Javascript
JS错误处理与调试操作实例分析
Apr 13 #Javascript
JS正则表达式常见函数与用法小结
Apr 13 #Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 #Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 #Javascript
JavaScript创建表格的方法
Apr 13 #Javascript
JavaScript实现捕获鼠标坐标
Apr 12 #Javascript
You might like
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
PHP 存储文本换行实现方法
2010/01/05 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
理解JavaScript的prototype属性
2012/02/11 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
python科学计算之narray对象用法
2019/11/25 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
存储过程的优点有哪些
2012/09/27 面试题
创意活动策划书
2014/01/15 职场文书
股东协议书
2014/04/14 职场文书
自主招生英文自荐信
2015/03/25 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
python 模块重载的五种方法
2021/04/24 Python