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 建设银行登陆键盘
Jun 10 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
简单的js表单验证函数
Oct 28 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
vue实现微信分享功能
Nov 28 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
javascript实现前端input密码输入强度验证
Jun 24 Javascript
JS+Canvas实现五子棋游戏
Aug 26 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中对用户身份认证实现两种方法
2011/06/04 PHP
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
jQuery使用手册之一
2007/03/24 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
DOM 事件流详解
2015/01/20 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
JavaScript适配器模式详解
2017/10/19 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
python中map()与zip()操作方法
2016/02/27 Python
Python生成密码库功能示例
2017/05/23 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
详解python运行三种方式
2019/05/13 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
python collections模块的使用
2020/10/16 Python
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
酒店总经理助理职责
2014/02/12 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
旅游文化节策划方案
2014/06/06 职场文书
消防工作实施方案
2014/06/09 职场文书
授权收款委托书
2014/09/23 职场文书
外贸采购员岗位职责
2015/04/03 职场文书