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 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
JQuery 入门实例1
Jun 25 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
详解vue表单——小白速看
Apr 08 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
基于js实现数组相邻元素上移下移
May 19 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
解析MySql与Java的时间类型
2013/06/22 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
一个超级简单的python web程序
2014/09/11 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
python实现两个文件夹的同步
2019/08/29 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
python爬虫要用到的库总结
2020/07/28 Python
印度购物网站:TATA CLiQ
2017/11/23 全球购物
二年级体育教学反思
2014/01/15 职场文书
行政人事岗位职责
2014/03/17 职场文书
逃课检讨书
2015/01/26 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
springboot临时文件存储目录配置方式
2021/07/01 Java/Android
浅析python中特殊文件和特殊函数
2022/02/24 Python
python实现双向链表原理
2022/05/25 Python