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 定义初始化数组函数
Sep 07 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
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
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
分享别人写的一个小型js框架
2007/08/13 Javascript
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
python 系统调用的实例详解
2017/07/11 Python
python的中异常处理机制
2018/08/30 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
Python字符串对象实现原理详解
2019/07/01 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
使用python实现对元素的长截图功能
2019/11/14 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
Java程序员面试题
2013/07/15 面试题
党性教育心得体会
2014/09/03 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书