rem布局实现不同分辨率移动终端的自适应、整体缩放

前言

为了让我们用html5画出来的界面在各种移动端都可以自适应比例，我们采用页面尺寸样式采用rem布局，以适应各种移动终端的显示。

假如我们以苹果6宽度像素的尺寸作为标准——750，以750设计稿为例。

第一步：设置初始rem

html{
    font-size: calc(100vw/7.5);
}

ps: 100vw是设备的宽度，除以7.5可以让1rem的大小在iPhone6下等于100px。

第二部 全局px替换为rem

替换设计稿中的px为rem，注意rem=px/100，即font-size: 12px，需要写成font-size: .12rem，其他宽度、高度、间距等同理。由于rem是相对于根节点元素大小的单位，遂当设备宽度改变时，采用rem布局的大小均会跟随相同比例变化，从而实现整体缩放。

动态图片展示：

若是低版本的设备不支持rem，那么就需要js来处理一下：

本博文demo下载地址：http://download.youkuaiyun.com/download/irokay/10181057

document.documentElement.style.fontSize = window.innerWidth/7.5 + 'px'