資訊專欄INFORMATION COLUMN
摘要：有與兩種方式來調整元素大小的值。如果你的頁面還需要適配到端，那么就老老實實的使用吧。在上面的實現中，我通過判斷設定了字體大小的范圍來避免上顯示過于夸張。二有的同學可能對的適配有點誤解。
最近看到這樣一個提問：我有一個750 x 1500尺寸的設計稿，設計稿上有一個150 x 50的按鈕，那么在寫頁面布局的時候，應該如何確定按鈕的尺寸呢？。大多數同學在回答的時候提到了rem。但我發現很多同學對于rem的實際應用還存在一點小小的疑問和誤解。
于是問題來了，rem到底是什么？rem是為了解決什么問題而存在的？rem能夠給我們帶來什么樣的便利？帶著這樣的問題，我們一起來總結一下rem的實踐。剛好工作中有一個移動端頁面的需求要做，就嘗試使用rem完成了一個小小的頁面適配。大家可以點擊這里，查看rem適配demo，
建議大家在chrome的device module下打開，通過切換不同手機的模擬器來查看不同尺寸下的區別。
rem是一個相對于根元素字體大小的css單位。與px一樣，他可以用來設置字體大小，也可以用來設置長度單位。相對于根元素字體大小是什么意思？
舉個栗子。在頁面中，html元素是根元素，因此我們首先給html設置一個字體大小
html { font-size: 100px; }
于是，在整個頁面中，就有這樣的換算公式 ： 1rem = 100px
所以如果一個按鈕，有如下的css樣式，就等同于他的寬為100px，高50px.
btn { width: 1rem; height: 0.5rem; }
這就是rem這個知識點的所有真相了。
?。。∈裁?？這就完了？這和px有什么區別？
對啊，這和px本來就沒有特別的區別，就是一個尺寸單位嘛！
所以提問的那個同學拿著750x1500設計圖來問，當我們設置為html的字體大小為100px時，
150x50的按鈕應該在頁面里面寫什么尺寸？，用px就應該寫 75x25，用rem就是 0.75 x 0.25.
真實寬度375px / 設計圖寬度750px = 按鈕真實寬度 / 設計圖按鈕寬度150px ==> 按鈕真實寬度 = 75px 又 1rem = 100px; ==> 75px = 0.75rem
有的時候我們希望在設計圖直接量出來的尺寸不用除2直接得到rem的值，也就是說量出來是150px，那么用rem表示就是1.5rem。這個時候我們只需要修改html的字體大小為50px即可。那么計算思路就有一點不同。
真實寬度375px / 設計圖寬度750px = 按鈕真實寬度 / 設計圖按鈕寬度150px ==> 按鈕真實寬度 = 75px 又 1rem = 50px; ==> 75px = 1.5rem
因此當設計圖的尺寸發生改變時，我們需要根據上述思路，動態的調整html的字體大小，以達到我們想要的rem換算。
以iphone各種手機的尺寸來說，iPhone4,5 寬度320px，iPhone6 375px，iPhone6 plus 414px. 如果一個按鈕，固定一個75x25的尺寸，那么就必然會導致在不同尺寸下的相對大小不一樣。這帶來的問題就在于會直接影響到設計的美觀，可能在iPhone6下，一個完美的設計圖，到了iPhone5,就變得low很多。 因為，為了讓頁面元素的尺寸能夠在設備寬度變化的時候也跟著變化，rem就出現了。
我們已經知道，rem的相對大小跟html元素的字體大小有關系。使用rem適配的原理就是我們只需要在設備寬度大小變化的時候，調整html的字體大小，那么頁面上所有使用rem單位的元素都會相應的變化。 這也是rem與px最大的區別。
有css與js兩種方式來調整html元素大小的值。
css方式
html { font-size: calc(100vw / 3.75) }
100vw表示設備寬度，除以3.75這里是以iphone6 的寬度375px為標準，為了保證html的字體大小為100px。這樣我們在換算的時候，1px 就是0.01rem，就很容易計算。
因為chrome下最小字體大小為12px，所以不能把html的font-size設置成1px或者10px，100px是我們最好的選擇。
js方式， 原理與css一樣，不過為了避免在一些老舊一點的手機瀏覽器上不支持calc，vm這些屬性，在實際應用中使用js是最好的。
!function () {
function a() {
var _width;
var clientWidth = document.documentElement.clientWidth;
if (clientWidth > 568) {
_width = 568;
} else if (clientWidth < 320) {
_width = 320;
} else {
_width = clientWidth;
}
// var pageWid = (window.innerWidth > document.querySelector("body").offsetHeight) ? 1136 : 640;
document.documentElement.style.fontSize = _width / 375 * 100 + "px";
}
var b = null;
document.addEventListener("DOMContentLoaded", function () {
window.addEventListener("resize", function () {
clearTimeout(b);
b = setTimeout(a, 300)
}, !1);
a()
}, false);
}(window);
在實踐中還有一個關鍵的問題需要處理。就是無論如何js的加載會比css慢，因此如果我們就這樣的話，頁面的元素會有一個很明顯的閃爍過程，因為再js加載進來之前，html的字體大小還沒有達到我們想要的效果。因此通常我們需要在css中，給html的字體大小設置一個默認值，以弱化這個閃爍的過程。默認值的具體大小需要我們自行根據設計圖的尺寸，以及你想要的結果，通過上面我們介紹的計算思路去得出。
html {
font-size: 100px;
}
一、rem的適用性很有局限，僅僅只能夠用于只在移動端展示的頁面。如果你的頁面還需要適配到pc端，那么就老老實實的使用px吧。在上面的實現中，我通過判斷設定了html字體大小的范圍來避免pc上顯示過于夸張。
二、有的同學可能對web的適配有點誤解。web中做適配并不需要考慮什么物理像素啊，dpi等等概念。這些應該僅僅只是Android或者ios原生app才會考慮的問題。這些誤會導致許多搞設計的同學在給web app做設計的時候，也丟一張1080 x 1920 的設計稿過來，真是愁死人了。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/21587.html
摘要：有與兩種方式來調整元素大小的值。如果你的頁面還需要適配到端，那么就老老實實的使用吧。在上面的實現中，我通過判斷設定了字體大小的范圍來避免上顯示過于夸張。二有的同學可能對的適配有點誤解。 最近看到這樣一個提問：我有一個750 x 1500尺寸的設計稿，設計稿上有一個150 x 50的按鈕，那么在寫頁面布局的時候，應該如何確定按鈕的尺寸呢？。大多數同學在回答的時候提到了rem。但我發現很多...
摘要：有與兩種方式來調整元素大小的值。如果你的頁面還需要適配到端，那么就老老實實的使用吧。在上面的實現中，我通過判斷設定了字體大小的范圍來避免上顯示過于夸張。二有的同學可能對的適配有點誤解。 最近看到這樣一個提問：我有一個750 x 1500尺寸的設計稿，設計稿上有一個150 x 50的按鈕，那么在寫頁面布局的時候，應該如何確定按鈕的尺寸呢？。大多數同學在回答的時候提到了rem。但我發現很多...
摘要：方案的簡單介紹基于前提頁面元素的布局尺寸全都以設計稿為基準等比例設置。給根節點設置一個基礎值，然后頁面的所有元素布局均相對于該值采用單位設定。 1、困擾多時的問題 在這之前做web app開發的的時候，在自適應方面一般都是寬度通過百分比，高度以iPhone6跟iPhone5之間的一個平衡值寫死，我們的設計稿都是iPhone5的640 * 1136標準，所以高度一般取個大概值，各種圖標的...
閱讀 3548·2021-08-31 09:39
閱讀 1854·2019-08-30 13:14
閱讀 2919·2019-08-30 13:02
閱讀 2769·2019-08-29 13:22
閱讀 2341·2019-08-26 13:54
閱讀 767·2019-08-26 13:45
閱讀 1586·2019-08-26 11:00
閱讀 982·2019-08-26 10:58
