flexible.js 移动端自适应 rem,源码解析,以及rem单位理解

2024-04-08 11:12

本文主要是介绍flexible.js 移动端自适应 rem,源码解析,以及rem单位理解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

源码

这段代码不知道是前端同事是从哪里拷贝过来的。

所以,我这里就不贴出处了

flexible.js是做什么的?

他是通过该变html根元素的字体大小,让页面自动缩放,更确切的说让rem控制的单位自动缩放 

flexible.js

(function flexible(window, document) {// 获取的html 的根元素var docEl = document.documentElement// dpr 物理像素比 //window.devicePixelRatio 当前浏览器物流像素比var dpr = window.devicePixelRatio || 1// adjust body font size  设置我们body 的字体大小function setBodyFontSize() {// 如果页面中有body 这个元素 就设置body的字体大小if (document.body) {document.body.style.fontSize = (12 * dpr) + 'px'} else {// 如果页面中没有body 这个元素,则等着 我们页面主要的DOM元素加载完毕再去设置body 的字体大小// DOMContentLoaded   DOM元素加载后执行document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 10    设置我们 html 元素的文字大小function setRemUnit() {// html 宽度分为10等份 var rem = docEl.clientWidth / 10;if(rem > 54){rem = 54;}docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resize  当我们页面尺寸大小发生变化的时候,要重新设置下rem 的大小window.addEventListener('resize', setRemUnit)// pageshow 是我们重新加载页面触发的事件window.addEventListener('pageshow', function(e) {// e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面,也需要从新计算一下rem 的大小if (e.persisted) {setRemUnit()}})// detect 0.5px supports  有些移动端的浏览器不支持0.5像素的写法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))

你了解rem吗?

推荐文章

CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】_css vh-CSDN博客

1.什么是rem

相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。

rem是CSS3新增的一个相对单位,但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。 

2.rem 与 px 的计算关系

rem的值是px的倍数

默认情况下font-size = 16px,那么1rem = 16px

rem 如何修改与px的相对计算关系

我们可以在并且只能在html标签(因为html节点是根节点,就是rem里面的r:root)里面修改font-size : 32px, 从而1rem = 32px

代码

 /* rem的用法 */ 
html{ 
font-size:16px;  // 1rem = 16px 
} .div-rem{ 
width: 10rem;    // 10rem = 10 x 16 = 160px 
height: 10rem;   // 10rem = 10 x 16 = 160px 
font-size: 1rem; // 1rem = 16px 
background-color: #a58778; 
}


(另外需注意chrome强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem的计算还是以12px为基准,所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)。

rem在移动端应用可参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取) 

原文链接:https://blog.csdn.net/cplvfx/article/details/125402868

3.使用rem注意事项

注:需设置meta缩放比1:1

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=no, minimum-scale=1, initial-scale=1,target-densitydpi=low-dpi" />

不懂的可以看这篇文章

前端HTML的meta设置-前端必看_cplvfx的博客-CSDN博客

【重要】如果你了解rem,那么你就发现了flexible.js的问题

很重要的一句话

rem是相对根节点html的字体大小来计算;

rem是相对根节点html的字体大小来计算;

rem是相对根节点html的字体大小来计算;

那么,上面代码中的这段代码是可有可无的,

因为只需要计算html字体大小即可,不需要计算body的字体大小,

所以,使用过程中,我们没有注释这段代码

    // adjust body font size  设置我们body 的字体大小function setBodyFontSize() {// 如果页面中有body 这个元素 就设置body的字体大小if (document.body) {document.body.style.fontSize = (12 * dpr) + 'px'} else {// 如果页面中没有body 这个元素,则等着 我们页面主要的DOM元素加载完毕再去设置body 的字体大小// DOMContentLoaded   DOM元素加载后执行document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();

推荐文章

文章1

前端HTML的meta设置-前端必看_谷歌网站meta html需要设置-CSDN博客

文章2 

CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】_css vh-CSDN博客

文章3 

px to rem & rpx & vw中文文档 |px自动转换rem插件|css|字体大小尺寸转换_px to rem & rpx & vw配置-CSDN博客

这篇关于flexible.js 移动端自适应 rem,源码解析,以及rem单位理解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/885422

相关文章

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

java解析jwt中的payload的用法

《java解析jwt中的payload的用法》:本文主要介绍java解析jwt中的payload的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java解析jwt中的payload1. 使用 jjwt 库步骤 1:添加依赖步骤 2:解析 JWT2. 使用 N

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程(OOP)体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认

Java 正则表达式URL 匹配与源码全解析

《Java正则表达式URL匹配与源码全解析》在Web应用开发中,我们经常需要对URL进行格式验证,今天我们结合Java的Pattern和Matcher类,深入理解正则表达式在实际应用中... 目录1.正则表达式分解:2. 添加域名匹配 (2)3. 添加路径和查询参数匹配 (3) 4. 最终优化版本5.设计思

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown(MD)因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析

Java字符串处理全解析(String、StringBuilder与StringBuffer)

《Java字符串处理全解析(String、StringBuilder与StringBuffer)》:本文主要介绍Java字符串处理全解析(String、StringBuilder与StringBu... 目录Java字符串处理全解析:String、StringBuilder与StringBuffer一、St

Spring Boot循环依赖原理、解决方案与最佳实践(全解析)

《SpringBoot循环依赖原理、解决方案与最佳实践(全解析)》循环依赖指两个或多个Bean相互直接或间接引用,形成闭环依赖关系,:本文主要介绍SpringBoot循环依赖原理、解决方案与最... 目录一、循环依赖的本质与危害1.1 什么是循环依赖?1.2 核心危害二、Spring的三级缓存机制2.1 三

C#中async await异步关键字用法和异步的底层原理全解析

《C#中asyncawait异步关键字用法和异步的底层原理全解析》:本文主要介绍C#中asyncawait异步关键字用法和异步的底层原理全解析,本文给大家介绍的非常详细,对大家的学习或工作具有一... 目录C#异步编程一、异步编程基础二、异步方法的工作原理三、代码示例四、编译后的底层实现五、总结C#异步编程

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/