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 相关文章推荐
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
JavaScript 反射学习技巧
Oct 16 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处理斐波那契数列非递归方法
2012/02/04 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
vue组件间通信解析
2017/03/01 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
Python实现telnet服务器的方法
2015/07/10 Python
python中list列表的高级函数
2016/05/17 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
Python3 filecmp模块测试比较文件原理解析
2020/03/23 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
HTML5进度条特效
2014/12/18 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
护理自荐信
2013/10/22 职场文书
大学本科生的个人自我评价
2013/12/09 职场文书
读书笔记怎么写
2015/07/01 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
部分武汉产收音机展览
2022/04/07 无线电
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技