浅谈使用rem实现页面自适应布局

在谈到rem时大家可能都会想到em px等用于设置页面元素的单位，但就rem来说它有em和px不可达的优点。rem中第一个单词代表root，而它的root就是html元素，也就是说它的大小是相对于html元素的font-size大小进行相应的变化的。

em是相对与父元素的font-size大小而进行变化的，可以想象当我们应用太多的时候，必定会带来混乱，到最后也难以设置字体大小，rem就是用于解决这个问题。但是rem可不仅仅用于设置字体大小，它在移动端的页面自适应也不失为一种不错的方案。

先上一段代码解释下rem的自适应方案。

    
    
    





    我可以自适应屏幕大小

这段代码大家可以复制在本地运行查看效果。代码虽然很短，但也有一些需要揣摩的点

• const remUnit = 37.5;
  这里的37.5是以常作为设计模版的iphone6宽度除10得来的，为的是设定一个基本的标准(375px下font-size值为14px)

• let width = document.documentElement.getBoundingClientRect().width;
  getBoundingClientRect()这个方法常用于获取页面实际可用于布局的宽度，它有六个值，但这里我们只用到width

• div.style.fontSize = parseFloat((width / 10 * rem).toFixed(6)) + 'px';
  用于将最终在当前屏幕宽度下的字体大小插入内联的style样式

• 在实际操作时，大家可能发现在屏幕宽度小于320px(iphone5)，字体始终会以12px显示，尽管内联样式中font-size值小于12px，其实这是因为浏览器最小可以渲染的字体大小就是12px

• window.getComputedStyle，实际应用下来发现这个方法真的很实用，虽然在代码中没有使用，方法用于得到在屏幕中实际显示元素的大小，避免了上述那种实际显示大小和代码大小不同的情况

• onresize方法是自带的用于监听屏幕放大缩小

• 上面只是项目实际应用中很小一部分，记录下来方便下次查看。