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

相关文章

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

SpringCloud动态配置注解@RefreshScope与@Component的深度解析

《SpringCloud动态配置注解@RefreshScope与@Component的深度解析》在现代微服务架构中,动态配置管理是一个关键需求,本文将为大家介绍SpringCloud中相关的注解@Re... 目录引言1. @RefreshScope 的作用与原理1.1 什么是 @RefreshScope1.

Java并发编程必备之Synchronized关键字深入解析

《Java并发编程必备之Synchronized关键字深入解析》本文我们深入探索了Java中的Synchronized关键字,包括其互斥性和可重入性的特性,文章详细介绍了Synchronized的三种... 目录一、前言二、Synchronized关键字2.1 Synchronized的特性1. 互斥2.

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很

Java的IO模型、Netty原理解析

《Java的IO模型、Netty原理解析》Java的I/O是以流的方式进行数据输入输出的,Java的类库涉及很多领域的IO内容:标准的输入输出,文件的操作、网络上的数据传输流、字符串流、对象流等,这篇... 目录1.什么是IO2.同步与异步、阻塞与非阻塞3.三种IO模型BIO(blocking I/O)NI

Python 中的异步与同步深度解析(实践记录)

《Python中的异步与同步深度解析(实践记录)》在Python编程世界里,异步和同步的概念是理解程序执行流程和性能优化的关键,这篇文章将带你深入了解它们的差异,以及阻塞和非阻塞的特性,同时通过实际... 目录python中的异步与同步:深度解析与实践异步与同步的定义异步同步阻塞与非阻塞的概念阻塞非阻塞同步

Redis中高并发读写性能的深度解析与优化

《Redis中高并发读写性能的深度解析与优化》Redis作为一款高性能的内存数据库,广泛应用于缓存、消息队列、实时统计等场景,本文将深入探讨Redis的读写并发能力,感兴趣的小伙伴可以了解下... 目录引言一、Redis 并发能力概述1.1 Redis 的读写性能1.2 影响 Redis 并发能力的因素二、

Spring MVC使用视图解析的问题解读

《SpringMVC使用视图解析的问题解读》:本文主要介绍SpringMVC使用视图解析的问题解读,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring MVC使用视图解析1. 会使用视图解析的情况2. 不会使用视图解析的情况总结Spring MVC使用视图

利用Python和C++解析gltf文件的示例详解

《利用Python和C++解析gltf文件的示例详解》gltf,全称是GLTransmissionFormat,是一种开放的3D文件格式,Python和C++是两个非常强大的工具,下面我们就来看看如何... 目录什么是gltf文件选择语言的原因安装必要的库解析gltf文件的步骤1. 读取gltf文件2. 提

Java中的runnable 和 callable 区别解析

《Java中的runnable和callable区别解析》Runnable接口用于定义不需要返回结果的任务,而Callable接口可以返回结果并抛出异常,通常与Future结合使用,Runnab... 目录1. Runnable接口1.1 Runnable的定义1.2 Runnable的特点1.3 使用Ru