js自適應rem -- 主要適用於移動端
阿新 • • 發佈：2018-12-23
rem是指相對於根元素(html)的字型大小的單位, 利用它能實現強大的螢幕適配佈局。下面主要應用的是基於js去調整根元素字型大小， 從而實現各個尺寸螢幕的適配；
//designWidth:設計稿的實際寬度值，需要根據實際設定
//maxWidth:製作稿的最大寬度值，需要根據實際設定
//這段js的最後面有兩個引數記得要設定，一個為設計稿實際寬度，一個為製作稿最大寬度，例如設計稿為750，最大寬度為750，則為(750,750)
;(function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style" 使用方法：
1.複製上面這段程式碼到你的頁面的頭部的script標籤的最前面。
2.根據設計稿大小，調整裡面的最後兩個引數值。
3.使用1rem=100px轉換你的設計稿的畫素，例如設計稿上某個塊是100px*300px,換算成rem則為1rem*3rem。
注： html font-size字型大小 = 裝置寬度 / (設計圖尺寸 / 100);
假設提供的設計稿為750PX的，那麼：
deviceWidth = 320，font-size = 320 / 7.5 = 42.6666px
deviceWidth = 375，font-size = 375 / 7.5= 50px
deviceWidth = 414，font-size = 414 / 7.5 = 55.2px
deviceWidth = 500，font-size = 500 / 7.5 = 66.6666px
實際應用：假設有一個750的設計稿分上中下三個部分， 上（650＊80）， 中（左邊：200＊130， 右邊：420 ＊ 130）， 下（650 ＊ 200）
則實現程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta name="keywords" content="" />
<title>rem demo</title>
<link rel="stylesheet" href="base.css">
<script type="text/javascript">
;
(function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width > maxWidth && (width = maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 設定好後才能執行 refreshRem，不然 refreshRem 會執行2次；
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //防止執行兩次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 瀏覽器後退的時候重新計算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 750);
</script>
<style media="screen">
html,
body {
margin: 0;
padding: 0;
}
.header {
width: 6.5rem;
height: 0.8rem;
background: red;
margin: 0 auto 0.2rem;
}
.body {
width: 6.5rem;
height: 3rem;
background: blue;
overflow: hidden;
margin: 0 auto;
margin-bottom: 0.2rem;
}
.body_left {
width: 2rem;
height: 3rem;
background: #eb4509;
float: left;
}
.body_right {
width: 4.2rem;
height: 3rem;
background: green;
margin-left: 0.3rem;
float: left;
}
.footer {
width: 6.5rem;
height: 2rem;
background: purple;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 正文 -->
<div class="container">
<div class="header">
</div>
<div class="body">
<div class="body_left">
</div>
<div class="body_right">
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
效果如下圖所示：
這樣不論我們螢幕的尺寸怎麼變化， 我們畫好的頁面總是能按照定好的比例調整；