rem适配方案 无注释版本
// H5页面的rem适配计算 自调用函数
(function(doc, win, baseW) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
// 设置data-dpr属性,留作的css hack之用
var dpr = ( window.devicePixelRatio * 1 ).toFixed(2) || 1;
dpr = dpr == Math.ceil(dpr) ? Math.ceil(dpr) : dpr;
docEl.setAttribute('data-dpr', dpr);
var recalc = function(){
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
clientWidth = clientWidth >= baseW ? baseW : clientWidth;
docEl.style.fontSize = 100 * ( clientWidth / baseW) + 'px';
};
if (!doc.addEventListener) return;
recalc()
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window, 750);
带有详细注释版本
// 打上注释的rem适配计算
(function(doc, win, baseW) {
var docEl = doc.documentElement, // 返回一个页面的根节点元素(当前页面的html标签)
resizeEvt = "orientationchange" in window ? "orientationchange" : "resize", // 获取移动端屏幕是否翻转(手机重力感应等引起屏幕长宽变化之类的)
isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(
navigator.userAgent
); // 设置data-dpr属性,留作的css hack之用
var dpr = (window.devicePixelRatio * 1).toFixed(2) || 1;
dpr = dpr == Math.ceil(dpr) ? Math.ceil(dpr) : dpr;
docEl.setAttribute("data-dpr", dpr);
var recalc = function() {
var clientWidth = docEl.clientWidth; // 获取当前页面的实际宽度
if (!clientWidth) return;
// 设置当前页面宽度 如果大于或等于1920尺寸 宽度则为1920去计算 // 小于1920尺寸则按照当前页面宽度计算
clientWidth = clientWidth >= baseW ? baseW : clientWidth;
// 计算得出 当前屏幕下的根节点元素的html像素单位 24是1rem=24px 方便计算的情况下可以书写50 1rem=50px
if (24 * (clientWidth / baseW) < 16) {
docEl.style.fontSize = 16 + "px"; // 根节点fontSize最小16px
} else {
docEl.style.fontSize = 24 * (clientWidth / baseW) + "px"; // 当前根节点font-size的大小
// ;
}
};
if (!doc.addEventListener) return;
// 第一个参数:添加事件 第二个参数:触发事件所执行的函数 第三个参数:可选 布尔值 指定事件是否在捕获或冒泡阶段执行
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window, 1920);
这里推荐一个px自动提供转rem的扩展工具:px2rem
另外一种适配方案 媒体查询
<!DOCTYPE html>
<html lang="en">
<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>
/*
rem布局的适配过程:
1、需要把px单位转换成rem单位
px = rem * html标签的font-size
——》rem = px / html标签的font-size
= px / 会根据当前屏幕的大小,自定义一个html标签的font-size 50px
= 400 / 50
= 8rem
2、配合媒体查询设置不同屏幕下的html标签的font-size (等比例缩放)
比例 = 当前屏幕宽度 / 当前html标签的font-size
= 750 / 50
= 15
当前html标签的font-size = 当前屏幕宽度 / 比例
= 640 / 15
*/
div {
width: 8rem;
height: 8rem;
background-color: pink;
}
/* 适配375px屏幕下的font-size */
@media screen and (min-width:375px) {
html {
/* font-size: (375px/15); */
font-size: 25px;
}
}
/* 适配640px屏幕下的font-size */
@media screen and (min-width:640px) {
html {
/* font-size: ????; */
/* font-size: (640px/15); */
font-size: 42.66px;
}
}
/* 适配750px屏幕下的font-size */
@media screen and (min-width:750px) {
html {
font-size: 50px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>