rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px = 1rem
docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>圣诞主题</title>
<style type="text/css">
section {
width: 100%;
height: 100%;
background: red;
}
.page{
width: 5rem;
height: 10rem;
background: yellow;
font-size: 0.3rem;
}
</style>
</head>
<body>
<section>
<div class="page">rem跟着html:font-size变化</div>
</section>
</body>
<script type="text/javascript">
var docEl = document.documentElement,
//当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，
//注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
//总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
//设置根字体大小
docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
};
//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
</script>
</html>
44
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
