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 相关文章推荐
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
typescript配置alias的详细步骤
Aug 12 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 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
PHP4中实现动态代理
2006/10/09 PHP
php中的三元运算符使用说明
2011/07/03 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
smarty实现多级分类的方法
2014/12/05 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
php中请求url的五种方法总结
2017/07/13 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
Python实现一个论文下载器的过程
2021/01/18 Python
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
ktv周年庆活动方案
2014/08/18 职场文书
法定代表人授权委托书
2014/09/19 职场文书
2014年度安全工作总结
2014/12/04 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
致运动员加油稿
2015/07/21 职场文书
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技
postgresql中如何执行sql文件
2023/05/08 PostgreSQL