簡介
在頁面整體布局中，頁面元素的尺寸大小（長度、寬度、內外邊距等）和頁面字體的大小也是重要的作業之一，
一個合理設定，則會讓頁面看起來層次分明，重點鮮明，賞心悅目，反之，一個不友好的頁面尺寸和字體大小設定，則會增加頁面的復雜性，增加用戶對頁面理解的復雜性；甚至在當下訪問終端（iPhone、iPad、PC、Android…）層出不窮的今天，適應各式各樣的訪問終端，將成為手中的一塊“燙手的山芋”，
所以在近幾年，“九宮格”式的“流式布局”再度回歸，為了提供頁面布局，及其它的可維護性、可擴展性，我們嘗試將頁面元素的大小，以及字體大小都設定為相對值，不再是孤立的固定像素點，使其能在父元素的尺寸變化的同時，子元素也能隨之適應變化，以及結合少量最新CSS3的@media查詢，來實作“回應式布局”，bootstrap這類CSS框架大勢興起，
然而在CSS中，W3C檔案把尺寸單位劃為為兩類：相對長度單位和絕對長度單位
相對單位：
%：相對單位，它是相對于父級(自身)大小進行定位
- 缺點：能確定范圍的還是比較好計算，對于不太好確定值的地方不好使用百分比，并且會導致變形，高度一般不好控制
em：相對于當前容器的字體大小進行變化，比如當前容器內字體大小為20px，那么1em = 20px
- 缺點：會根據當前容器字體大小發生變化，假設每個容器字體大小不一致，那么計算會非常繁瑣
rem：font size of the root element，相對于當前根(html)元素的字體大小進行變化，比如當前設定html的字體大小為20px，那么1rem = 20px，瀏覽器默認的1rem = 16px
絕對單位：
px：像素單位是絕對單位，你設定了多少，不管什么螢屏下，都會保持不變，缺點：任何情況下都是固定值
em和rem的區別點擊查看
如何才能使用rem進行適配呢？
-
字體大小
-
值根據html根元素大小而定，同樣可以作為寬度，高度等單位
-
-
適配原理
-
將px替換成rem，動態修改html的font-size適配
-
-
兼容性
-
Ios6以上和android2.1以上，基本覆寫所有流行的手機系統
-
下面是我平時寫移動端使用的rem自適應配置：
// 動態修改 html font-size 大小
// 通過js操控根元素的字體大小,從而做到螢屏適配
!(function(doc,win){
var docHtml =doc.documentElement;
// 判斷視窗有沒有orientationchange這個方法，有就賦值給一個變數，沒有就回傳resize方法
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
resizes = function(){
// 獲取當前螢屏的大小
var cw =docHtml.clientWidth;
// 如果沒有獲取到當前螢屏的大小
if(!cw) return;
if (cw >= 750) {
docHtml.style.fontSize = '100px';
} else {
// 動態修改font-size 100 * (375 / 750) = 50 （iPhone6/7/8為例）
docHtml.style.fontSize = 100 * (cw / 750) + 'px';
}
}
if (!doc.addEventListener) return;
/*
addEventListener事件方法接受三個引數：
（1）事件名
（2）回呼執行函式
（3）是否冒泡
*/
win.addEventListener(resizeEvt,resizes,false);
// 系結瀏覽器縮放與加載事件
doc.addEventListener('DOMContentLoaded', resizes, false);
})(document,window)
將以上代碼放入一個單獨的js檔案當中，然后引入html檔案中使用即可，這樣在更換手機型號時，它就會動態修改html根節點的字體大小
下面給大家演示下實際代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="./resize.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
html,body{
height: 100%;
width: 100%;
}
/* 設定根元素的字體大小 */
html{
font-size: 50px;
}
.header{
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background-color: lightcoral;
font-size: 30px;
color: #ccc;
}
ul{
list-style: none;
/* 彈性布局 */
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-top: 0.2rem;
}
ul li.item{
/* root size :50px 1rem =50px */
width: 2rem;
height: 2rem;
border: 1px solid orangered;
margin-bottom: 0.2rem;
}
</style>
</head>
<body>
<!-- 頭部 -->
<header class="header">
<div class="header_top">
<h3>移動端適配</h3>
</div>
</header>
<!-- 主體內容部分 -->
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</body>
</html>
（上面引入的resize.js 就是rem自適應組態檔）
運行效果：
（基于IPhone 6/7/8）
（更改手機型號，動態修改根元素字體大小）
（注意！型號為iPad Pro時clientWidth已經大于750，所以根節點字體大小設定為100px）
至此，就完成了rem自適應移動端
本文來自博客園，作者：不知名前端李小白，轉載請注明原文鏈接：https://www.cnblogs.com/libo-web/p/15793238.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/413064.html
標籤：Html/Css
上一篇：px、em、rem三者的區別
下一篇：CSS三大特性