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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 Javascript
JavaScript实现前端网页版倒计时
Mar 24 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面向对象的方法重载两种版本比较
2008/09/08 PHP
PHP 判断常量,变量和函数是否存在
2009/04/26 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
JavaScript实现英语单词题库
2019/12/24 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
python简单实现AES加密和解密
2019/03/28 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
python实现数字炸弹游戏
2020/07/17 Python
python使用建议技巧分享(三)
2020/08/18 Python
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
数据库基础的一些面试题
2012/02/25 面试题
预备党员党课思想汇报
2014/01/13 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
开平碉楼导游词
2015/02/06 职场文书
如何写好闭幕词
2019/04/02 职场文书
redis内存空间效率问题的深入探究
2021/05/17 Redis
使用python求解迷宫问题的三种实现方法
2022/03/17 Python
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android