這篇文章主要介紹了行動 web 端螢幕適配(rem)。詳細的介紹了移動 web 端螢幕適配（rem），內容挺不錯的，現在分享給大家，也給大家做個參考。
前言
最近整理了一下以前學習前端的筆記，發現自己對移動web 端屏幕適配（rem）這一塊並沒有真正理解，只是會用。
接下來，把自己的一些對行動 web 端螢幕適配（rem）的思考記錄下來。
rem 介紹
rem 表示根元素（）的 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;
p {
width: 100/@r;
height: 200/@r;
}現在只需要將設計稿中元素的 px 單位轉換為 rem 單位。 所以，這時候，我們可以把設計稿也當成一個有一定尺寸的手機螢幕。
在我這個範例中，設計稿的寬度為 750px。 ######所以，750/15 = 50px，即在設計稿這樣尺寸的手機螢幕中，1rem = 50px。 ######然後，在 less 程式碼中，我們定義一個變數 @r。 ######量得 p 的寬度為 100px，因為在設計稿這樣尺寸的畫面中，1rem = 50px，所以該 p 的 rem 的值為：100/50 rem，即 100/@r。 ######量得 p 的高度為 200px，因為在設計稿這樣尺寸的畫面中，1rem = 50px，所以該 p 的 rem 的值為：200/50 rem，即 200/@r。 ######以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！ ######相關推薦：#########關於HTML中rel屬性的分析###############html頁面中meta的作用以及頁面的緩存與不緩存設定的解析#####################以上是關於行動 web 端螢幕適配(rem)的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
