最近整理了一下以前學習前端的筆記，發現自己對移動web 端螢幕適配（rem）這一塊並沒有真正理解，只是會用。
接下來，把自己的一些對行動web 端螢幕適配（rem）的思考記錄下來。
rem 介紹rem 表示根元素（<html>）的font-size 的大小。即若根元素的font-size 大小為14px，則1rem = 14px
rem 適配行動web 端適配效果在不同尺寸的螢幕下，同一個元素的大小看起來不是一樣大的，但是它們所佔螢幕寬度的比例是一樣的。
程式碼
// 在html 檔案的head 標籤<script type=text/javascript> (function(){ var html = document.documentElement; // 取得螢幕寬度（px） var hWidth = html.getBoundingClientRect().width; //設定html 標籤的font-size 大小為hWidth/15 html.style.fontSize = hWidth/15 + 'px'; })()</script> // 在less 中/* 定義變數@r：750/15 */@r:50rem; div { width: 100/@r; height: 200/@r;} javascript 程式碼首先，我們將螢幕的1/15 大小（px）複製給html 標籤的font-size 屬性。此時，在任何尺寸的螢幕上，螢幕尺寸（px）的1/15 px 都等於1rem 的大小。即：在任何尺寸的螢幕上，只要給元素設定值相同的rem，則在所有尺寸的螢幕上該元素所佔螢幕寬度的比例是一樣的，所佔比例一樣，就適配了所有尺寸的螢幕。
less 程式碼現在只需要將設計稿中元素的px 單位轉換為rem 單位。
所以，這個時候，我們可以把設計稿也當成一個有一定尺寸的手機螢幕。
在我這個例子中，設計稿的寬度為750px。
所以，750/15 = 50px，即在設計稿這樣尺寸的手機螢幕中，1rem = 50px。
然後，在less 程式碼中，我們定義一個變數@r。
量得div 的寬度為100px，因為在設計稿這樣尺寸的螢幕中，1rem = 50px，所以該div 的rem 的值為：100/50 rem，即100/@r。
量得div 的高度為200px，因為在設計稿這樣尺寸的螢幕中，1rem = 50px，所以該div 的rem 的值為：200/50 rem，即200/@r。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。