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 相关文章推荐
Dom操作之兼容技巧分享
Sep 20 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
bootstrap table表格插件使用详解
May 08 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
详解Vue This$Store总结
Dec 17 Javascript
Vue 实现html中根据类型显示内容
Oct 28 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
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
php常见的魔术方法详解
2014/12/25 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
详解React 元素渲染
2020/07/07 Javascript
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
简单理解Python中基于生成器的状态机
2015/04/13 Python
详解python开发环境搭建
2016/12/16 Python
python僵尸进程产生的原因
2017/07/21 Python
python实现kMeans算法
2017/12/21 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
Python Selenium库的基本使用教程
2021/01/04 Python
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
小学教师自我鉴定
2013/11/07 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
建国大业电影观后感
2015/06/01 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python
Python 发送SMTP邮件的简单教程
2021/06/24 Python