rem 工作原理及使用介绍

1、什么是rem？

rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位，也就是我们
前端常说的适配单位rem。因为rem的特性相对长度单位，常被用来做移动适配，pc端页面不推荐使用rem。

例如以下代码，渲染效果为： div的宽度为2rem=32px,高度为1rem=16px;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>html{font-size: 16px;}.box{width: 2rem;height: 1rem;border: 1px solid #f00;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

2、rem的移动适配原理

举个列子：

设计稿宽度：600px

移动设备：600px

设置html的 font-size= 移动设备 / 设计稿宽度 * 100 = 100px，那么 1rem = 100px

设置一个盒子的宽度: width=1rem（即100px），此时这个盒子屏占比为：1/6。

当相同的代码运行在屏幕为300px的设备上时，js动态设置html的 font-size= 移动设备 / 设计稿宽度 * 100 = 50px，渲染出来的盒子就是1rem = 50px,这个盒子屏占比同样为：1/6。以此达到移动适配的效果

可以看出适配的的关键就在于js设置html的font-size: font-size= 移动设备 / 设计稿宽度 * 100。那么这个公式怎么来的呢？

首先移动设备 / 设计稿宽度是渲染效果相对于设计稿的缩放比

然后移动设备 / 设计稿宽度 * 100 乘以100是为了把font-size(=rem)放大100倍，因为当font-size小于浏览器支持最小字体大小的时候，浏览器会把fon-size默认为最小字体大小。也可以乘以其他值如50，但是为了好计算，一般设置为10或100，这样，我们只需要把设计稿宽度如 width=50px，除以10或100，改为5rem或0.5rem就好了。

3、如何设置html的font-size大小

例如：设计稿为720px；当设备大于720px时，渲染比例1:1，当小于720px时，按照相应的比例缩小

var cw = document.documentElement.clientWidth;
if (cw > 720) { cw = 720;
}
document.getElementsByTagName("html")[0].style.fontSize = 100 * ( cw / 720) + 'px'

有理解不清晰的地方，欢迎留言讨论。。。

rem 工作原理及使用介绍相关推荐

ARKit从入门到精通（2）-ARKit工作原理及流程介绍
转载请注明出处:ARKit从入门到精通(2)-ARKit工作原理及流程介绍 1.1-写在前面的话 1.2-ARKit与SceneKit的关系 1.3-ARKit工作原理 1.3.1-ARSCNView ...
Nginx工作原理及相关介绍
Nginx工作原理及相关介绍一.Nginx工作原理与模块介绍 1.Nginx基本工作原理 NGINX以高性能的负载均衡器,缓存,和web服务器闻名.Nginx由内核和模块组成,其中,内核的设计非常微 ...
内存的工作原理和时序介绍
内存的工作原理及时序介绍内存是PC配件中结构最简单的,但在BIOS中却是最难调的,很多玩家超频都卡在内存上.并且,内存的原理.结构与时序多年不会改变,无论将来内存技术如何进步,相信这篇文章的存在价值 ...
关于协议转换器的分类以及工作原理的详细介绍
现如今,随着互联网的广泛应用,我们国内的网民也是突破了8.29亿,相信,大家对于网络这块是非常的熟悉了,它是一种虚拟的东西,但是它几乎存在于我们生活的各个角落,在很大程度的让我们的日常生活变得便捷与丰 ...
eja智能压力变送器工作原理_如何理解智能压力变送器工作原理及功能介绍
如何理解智能压力变送器工作原理及功能介绍智能压力变送器一般是由传感器.微处理器.存储器及模数.数模转换器组成.传感器用来检测被测量的信号,其所用材料因厂家而异.横河EJA为硅谐振式,把被测参数转换为 ...
ARKit从入门到精通-ARKit工作原理及流程介绍
2017-06-15 坤小 Cocoa开发者社区转载请注明出处:http://www.jianshu.com/p/0492c7122d2f 1.1-写在前面的话 1.2-ARKit与SceneKit ...
什么是网络光端机？网络光端机工作原理及功能介绍！
网络光端机,就是光信号传输的终端设备.由于目前技术的提高,光纤价格的降低使它在各个领域得到很好的应用.在远程光纤传输中,光缆对信号的传输影响很小,光纤传输系统的传输质量主要取决于光端机的质量,因为光端 ...
摄像头工作原理及结构介绍（一）
摄像头是机器视觉系统获取图像的关键部件,摄像头和数码照相机.扫描仪等又被统称为图像传感器,它将被处理目标物体的光形象转换成被称为视频的电信号,将这个信号A/D转换并送到处理器后就可以处理.分析.识别该 ...
数字音频光端机的工作原理及其应用介绍
数字音频光端机在通信系统中可以说是应用非常广泛,特别是在安防系统.智能交通监控系统.远程多媒体教学.校园监控.长距离广播电视传输系统.楼宇控制系统等,可以说我们的日常通讯是离不开音频光端机的.接下来就 ...

rem 工作原理及使用介绍

rem 工作原理及使用介绍相关推荐

最新文章

热门文章

rem 工作原理 及 使用介绍

rem 工作原理 及 使用介绍相关推荐

最新文章

热门文章

rem 工作原理及使用介绍

rem 工作原理及使用介绍相关推荐