<!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這個數(shù)字是根據(jù)你的設計圖的實際大小來的，所以值具體根據(jù)設計圖的大小,根據(jù)蘋果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，都是小數(shù)。iPhone6基礎上預覽設計
