在了解rem单位与字体大小的关系后，还是先用一个实例来实现伸缩式布局的效果。新建index.html文件，新增代码如下：

因为rem单位所实际代表的宽度会根据元素的字体大小改变，所以只需要通过JavaScript动态地获取页面宽度，再根据设计的切图宽度（如代码中为320px）进行计算，就可以得出字体的实际大小。这里的核心代码如下

var clientWidth = docEl.clientWidth;

if (!clientWidth)

return;

docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';

以几个主流的设备宽度为例，若设计以320px标准为宽度，根元素字体默认为20px。则当设备宽度提升到640px的时候，计算字体大小的公式是:20*（640/320）

以上计算得出的值为40，也就是在640宽度设备下，默认字体大小会放大两倍。而同样img元素的宽度定义为14rem时，在320宽度下实际宽度为280px，而640宽度下就会自动变为560px。实现等比缩放的效果的同时，只需要编写一套rem单位的布局样式表文件。

在游览器中运行index.hml文件，发现不同设备下网页的布局并没有失调，从而实现了可伸缩式的布局。展示效果如图所示

除了使用JavaScript动态计算，还可以使用media query在样式表预先设置字体列表，从而实现自动适配