H5移动端适配方案-rem
为什么移动端要适配: 由于移动设备的尺寸不一，所以移动端的页面要能够适应不同尺寸的设备，即页面的自适应，让页面在视觉上保持一致。
rem:rem 是css3的一种相对单位，参考是根元素HMTL的font-size的值，即html的font-size:10px;那么 1rem = 10px;
先看下面的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;页面也会保持同时缩放，印证了我们动态设置的没有问题，保证了页面的一致性
手机扫一扫
移动阅读更方便
你可能感兴趣的文章