前言

昨天刷题的时候遇到这个填空，初看代码，并不太懂这段代码的含义，通过调试和查阅资料，发现这段代码作用可大了，可以让网页适配移动端，设置页面文字大小随屏幕大小变化而变化。

什么是rem❓

rem是相对单位，是相对HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。（除了IE8及更早版本外，所有浏览器均已支持rem）

问题分析

首先我们要知道设置页面文字大小随屏幕大小变化而变化需要用到什么单位，没错就是上面所说的rem这个相对单位，设置页面文字大小随屏幕大小变化而变化，这句话说白了就是实现响应式的操作，除了文字，网页布局也经常涉及到响应式的布局，让网页做到兼容不同的设备或者分辨率，在不同的应用场景，实现一样的用户体验。

关于响应式网页设计

响应式网站设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

rem布局代码如下

(function (doc, win) {
vardocEl=doc.documentElement,
resizeEvt='orientationchange'inwindow?'orientationchange' : 'resize',
recalc=function () {
//在以下横线中填写，如何宽度大于720那就按720执行，否则按实际宽varclientWidth=docEl.clientWidth;
// var clientWidth = ______(10)________;varclientWidth=docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize=20* (clientWidth/320) +'px';
  };
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);