网站建设平台合同模板下载/站优云seo优化
介绍rem作用：
谈到rem，我们首先就要说一下移动端的适配问题: 由于移动设备的尺寸不一，所以移动端的页面要能够适应不同尺寸的设备，即页面的自适应，让页面在视觉上保持一致。
rem:rem 是css3的一种相对单位，参考是根元素HMTL的font-size的值，即html的font-size:10px;那么 **1rem = 10px;**我们使用rem主要作用就是为了适配移动端不同屏幕对应尺寸单位大小的区别来达到兼容效果。
先看下面的rem书写示例
<!DOCTYPE html>
<html lang="en" style='font-size: 10px;'>
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box {width: 10rem;height: 10rem;background: red;}</style>
</head>
<body><div id="box"></div>
</body>
</html>元素box的大小是多少px呢？根据公式算，1rem = html 的 font-size 的值，那么 10rem = 10 * (html font-size的值) = 10 * 10 = 100px；所以box大小是100px * 100px；
知道了rem 怎么用了，那到底移动端是怎么适配的呢？我们知道用了rem作为单位,元素的大小就会根据根元素font-size的值进行计算，如果我们监听窗口的大小去动态的设置根元素的font-size,不就能适应不同尺寸的设备了嘛，来看看下面的一段js
(function (doc, win, undefined) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize', recalc = function () {var clientWidth = docEl.clientWidth;if (clientWidth === undefined) return;docEl.style.fontSize = 10 * (clientWidth / 750) + 'px'; // 设置 根元素html的font-size};if (doc.addEventListener === undefined) return;win.addEventListener(resizeEvt, recalc, false);// 监听窗口改变doc.addEventListener('DOMContentLoaded', recalc, false) // 初始HTML加载和解析完成时})(document, window);
这段代码什么意思呢？就是页面初始化的时候和窗口改变的时候，根据当时窗口的大小动态设置根元素html的font-size值，再配合使用相对单位rem,来达到自适应的效果。
最为核心的是这句代码
docEl.style.fontSize = 10 * (clientWidth / 750) + 'px'; // 设置 根元素html的font-size// docEl => 是 元素html// clientWidth => 是当前窗口的宽度// 750 => 是 设计稿的宽度
假如我们的开发环境的窗口和设计稿一样也是750，那个当前根元素的font-size值就是10px;此时，我们量得一个元素的宽设计稿是750px，那么我们就要写成 75rem;这样通过换算 （75rem * 10px） 就会得到正确的 750px；简单点就是 我们量的设计稿元素的宽 除以 根元素的font-size值，就是我们要写成的rem的值，仔细想想是不是这样的
基于我们上面的假设，如果此时窗口变成了375px,根元素font-size 就变成了 5px,我们响应设置的 75rem 实际上会渲染成 75rem* 5px = 375px;页面也会保持同时缩放，印证了我们动态设置的没有问题，保证了页面的一致性