一、什么是REM？
REM是CSS3新增的一个相对于根元素的单位。也就是说，使用REM作为单位可以实现页面中元素的相对尺寸（宽度、高度、字体大小等）的调整，以满足不同设备的屏幕分辨率下的响应式布局设计需求。值得一提的是，REM也可以使用javascript来动态调整根元素的字体大小，从而使整个页面的响应式设计效果更加灵活适配各种不同尺寸的屏幕设备。
使用REM的好处有以下几点：
1、更适用于移动端的设备，同时解决了兼容问题
2、可以解决字体大小的单位问题
3、相对于EM单位来说，REM更方便且灵活。因为相对于根元素，并且只需设置一次，实现全局响应式设计效果
二、如何使用REM？
为了设置REM单位，我们需要设置根元素的font-size属性，并根据需要设置不同的字体大小对应REM单位值。
<html>
<head>
<title>使用REM实现页面响应式设计教程</title>
<style>
html { font-size: 62.5%; }
/* 将1rem设置为10px */
body { font-size: 1.4rem; }
</style>
</head>
<body>
<div>使用REM实现页面响应式设计示例</div>
</body>
</html>
上述代码中我们设置了HTML的font-size属性为62.5%，这样就把根元素的字体大小设置为了10px（网页默认的字体大小为16px，如果设置为62.5%后实际大小就是10px）。接下来，我们将body的字体大小设置为1.4rem。这样，页面中的元素尺寸大小都可以按照需要设置其对应的REM单位。
三、REM的Javascript动态设置
有时候我们需要在不同屏幕分辨率下实现更精细化的响应式效果，这时候REM单位的固定设置就有些力不从心了。可以使用Javascript动态地调整根元素的字体大小，变相地改变REM单位值。
<script>
(function (doc, win) {
var docEl = doc.documentElement;
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
上述代码中我们使用了一个自执行的立即函数，将字体大小设置为屏幕分辨率的百分比（例如，640x480分辨率下，REM单位对应的字体大小为640/100=6.4px；1280x720分辨率下，REM单位对应的字体大小为12.8px）。这样，在不同的屏幕分辨率下，页面响应式效果就更加灵活了，可以实现更好的视觉和用户体验效果。
四、REM的兼容性问题
虽然REM的应用广泛，但是其在浏览器的兼容性问题仍然需要我们关注。一般来说，REM在IE9以下的浏览器会出现兼容性问题，同时在使用REM的时候，需要注意选择合适的媒体查询属性，以保证页面在各种设备上的布局效果良好。
五、小结
本文介绍了如何使用REM实现页面响应式设计，包括了REM的概念、使用方法、Javascript动态设置和兼容性问题。希望对读者的响应式设计实践有所帮助。
<html>
<head>
<title>使用REM实现页面响应式设计教程</title>
<style>
html { font-size: 62.5%; }
/* 将1rem设置为10px */
body { font-size: 1.4rem; }
</style>
</head>
<body>
<div>使用REM实现页面响应式设计示例</div>
</body>
<script>
(function (doc, win) {
var docEl = doc.documentElement;
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</html>
