GB-html5-respond
简介
移动端响应式布局解决方案、用 JavaScript 根据屏幕宽度计算 Root 字体大小弥补媒体查询断点断层过大问题，元素单位使用 REM 即可基于 Root 字体大小来改变自身大小。
演示
http://givebest.github.io/gb-respond.html
使用
HTML
在 Head 引入（CSS前面）
<head>
<!-- 省略 -->
<script src="js/GB-respond.js"></script>
<link rel="stylesheet" href="css/normalize.css">
</head>CSS
以 375 （设计稿 750 * N） 屏幕宽度为基础，推算出元素相对应的 REM 值，如设计稿字体为：40px，那么换算下来为：40 / 2 / 100 = .2rem
html {
font-size: 100px;
}
body {
font-size: .12rem; /* 在 375 屏幕宽相当于 12px */
}
/* 一级容器，包含页面全部元素 */
.wrapper {
margin: 0 auto;
max-width: 640px;
min-width: 320px;
/* width: 3.75rem; */
}750（UI稿宽度） / 100（Html font-size） / 2 = 3.75rem
加宽度可解决部分 Android 下 webView 中兼容问题（webView 获取设备宽度小于实际宽度），如：HUAWEI MT7更新解决文案，详见 JS
灵感来源：https://m.taobao.com/#index
JS
Android 设备 WebView 会因设备设置字体（浏览器默认为
16px）大小影响，详情： https://github.com/hbxeagle/rem 。
解决方法如下：
var doc = window.document,
docEl = doc.documentElement,
defaultFontSize = parseFloat(window.getComputedStyle(docEl, null).getPropertyValue('font-size') || 16), // 获取 WebView 默认字体大小
width = parseFloat(docEl.getBoundingClientRect().width || docEl.clientWidth),
fontSize = 100 / designWidth * (width > maxWidth ? maxWidth : width),
finalFontSize = (defaultFontSize !== 16) ? (fontSize * (16 / defaultFontSize)) : fontSize; // WebView 默认字体大小不等于 16px 即设备设置改变了默认字体大小，进行换算正确的大小
docEl.style.fontSize = finalFontSize + 'px'; // 为 Html 设置字体大小感谢他们
参考： https://github.com/amfe/lib-flexible
https://github.com/hbxeagle/rem
