flexible.js实现移动端rem适配方案


Posted in Javascript onApril 07, 2020

需要了解的基础知识:

物理像素:物理像素又被称为设备像素,他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

设备独立像素:也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素),然后由相关系统转换为物理像素。

设备像素比:简称为dpr,其定义了物理像素和设备独立像素的对应关系。它的值可以按此公式计算得到:设备像素比 = 物理像素 / 设备独立像素 (安卓一般为:1;iPhone为2或者3)

visual viewport:可见视口,即屏幕宽度;

layout viewport:布局视口,即DOM宽度;

idea viewport:理想适口,使布局视口就是可见视口;

设备宽度(visual viewport)与DOM宽度(layout viewport),scale的关系是:(visual viewport)= (layout viewport)* scale

获取屏幕宽度的尺寸:window. innerWidth/Height

获取DOM宽度的尺寸:document. documentElement. clientWidth/Height

viewport的meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  • initial-scale:‘设置页面的初始缩放值,为一个数字,可以带小数';
  • maximum-scale:‘允许用户的最大缩放值,为一个数字,可以带小数';
  • user-scalable:‘是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许';

**flexible.js:**手机淘宝团队的热门适配方案

源码解析:

// 首先是一个立即执行函数,执行时传入的参数是window和document
(function flexible (window, document) {
 var docEl = document.documentElement // 返回文档的root元素
 var dpr = window.devicePixelRatio || 1 
 // 获取设备的dpr,即当前设置下物理像素与虚拟像素的比值

 // 调整body标签的fontSize,fontSize = (12 * dpr) + 'px'
 // 设置默认字体大小,默认的字体大小继承自body
 function setBodyFontSize () {
 if (document.body) {
  document.body.style.fontSize = (12 * dpr) + 'px'
 } else {
  document.addEventListener('DOMContentLoaded', setBodyFontSize)
 }
 }
 setBodyFontSize();

 // set 1rem = viewWidth / 10
 // 设置root元素的fontSize = 其clientWidth / 10 + ‘px'
 function setRemUnit () {
 var rem = docEl.clientWidth / 10
 docEl.style.fontSize = rem + 'px'
 }

 setRemUnit()


 // 当我们页面尺寸大小发生变化的时候,要重新设置下rem 的大小
 window.addEventListener('resize', setRemUnit)
  // pageshow 是我们重新加载页面触发的事件
 window.addEventListener('pageshow', function(e) {
  // e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面,也需要从新计算一下rem 的大小
  if (e.persisted) {
   setRemUnit()
  }
 })

 // 检测0.5px的支持,支持则root元素的class中有hairlines
 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))

不想看原理可以直接看这里按步骤使用即可

1. 在index.html文件使用CDN引入flexible.js文件。

// 引用地址
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js">
</script>

下面的这个meta标签 页面不要设定, Flexible会自动设定每个屏幕宽度的根font-size、动态viewport、针对Retina屏做的dpr。

// 这个标签不要设定!!!
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> -->

2. 把视觉稿中的px转换成rem

一般UI给我们的稿子大小是750的。就以这个为例子:在flexible.js中,把750px分为10份,1rem 为 75px。所以font-size的基准值为75px;
css换算成rem公式为: px值 / 75 = rem, 例如:100px=100/75=1.33rem
但是这样一来计算起来就非常的复杂。那么我们在日常开发中怎么快速计算呢,这里我说下我常用的编译器VScode 它里面有个插件叫cssrem,用它就可以在我们输入px值后自动转换rem。

安装方法如下:

①:安装插件

flexible.js实现移动端rem适配方案

②:修改配置参数

flexible.js实现移动端rem适配方案

当设计图为750时在下图中这里填写75
root font-size (unit: px), default: 16
这代表根字体大小,默认是16px,即1rem = 16px,我们这里把他改为75。
cssrem.fixedDigits px转rem小数点最大长度,默认:6。

flexible.js实现移动端rem适配方案

③:修改完参数后我们只要输入px值插件就会自动算出rem值,效果如下图:

flexible.js实现移动端rem适配方案

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

Javascript 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
小程序自动化测试的示例代码
Aug 11 Javascript
Vant picker 多级联动操作
Nov 02 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 #Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 #Javascript
小谈angular ng deploy的实现
Apr 07 #Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 #Javascript
vue开发中遇到的问题总结
Apr 07 #Javascript
手把手教您实现react异步加载高阶组件
Apr 07 #Javascript
javascript绘制简单钟表效果
Apr 07 #Javascript
You might like
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
详解Python的Django框架中的通用视图
2015/05/04 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
python字符串与url编码的转换实例
2018/05/10 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
django实现日志按日期分割
2020/05/21 Python
详细分析Python垃圾回收机制
2020/07/01 Python
python图片合成的示例
2020/11/09 Python
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
2014司机年终工作总结
2014/12/05 职场文书
地震捐款简报
2015/07/21 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书