<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>rem单位的使用</title>
</head>
<body>
<h1>标题</h1>
<script type="text/javascript">
(function() {
//获取html元素
var html = document.getElementsByTagName('html')[0];
//屏幕的宽度（兼容处理）
var width = document.documentElement.clientWidth || document.body.clientWidth;
//375这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小,根据苹果6的尺寸布局设计
html.style.fontSize = width / 375 * 50 * 2 + 'px';
})()
</script>
</body>
</html>
(function() {
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
var recalc = function() {
// var clientWidth = document.body.clientWidth;
var clientWidth = window.screen.availWidth;
alert(clientWidth)
if (!clientWidth) {
return;
}
document.documentElement.style.fontSize = 40 * (clientWidth / 375) + 'px';
// document.documentElement.style.visibility = 'visible';
}
if (!document.documentElement.addEventListener) {
return;
}
window.addEventListener(resizeEvt, recalc, false);
window.addEventListener('DOMContentLoaded', recalc, false);
})()
使用注意：html字体大小被设置为100px,所以1rem=100px;使用时14px=0.14rem，都是小数。iPhone6基础上预览设计
