移動端rem適配
上個禮拜做了一個移動端的頁面，因為做的比較少，花了一上午也沒有做出一個理想的適配，最後因為時間只能妥協用@media+px。
用@media的弊端很大，採用的px單位，需要在不同的屏中都要重新設定值，造成程式碼的冗餘、臃腫。（這種方法很蠢！！）
今天在網上搜了一個比較理想的方法，採用rem。
rem是CSS3新增的一個相對單位（root em,根em），這個單位引起了廣泛光柱。這個單位與em有什麼區別呢？區別在於使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支援rem。對於不支援它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的宣告。這些瀏覽器會忽略rem設定的字型大小。下面就是一個栗子：
p{font-size:14px;font-size:.875rem;}注意：選擇使用什麼字型單位主要由你的專案來決定，如果你的使用者群都使用最新版的瀏覽器，那推薦使用rem，如果要考慮相容性，那就使用px，或者兩者同時使用。
px與rem的選擇
對於只需要適配少部分手機裝置，且解析度對頁面印象不大的，使用px即可。
對於需要適配各種移動裝置，使用rem，例如只需要適配iPhone和iPad等解析度差別比較挺大的裝置。
網上找了兩種設定rem的方法。
第一種採用@media
/*移動端適配 width|height|font-size = 視覺稿量出來的值 / 100rem;@lbl*/ 這種方法有一個弊端，需要計算每一個屏的基礎值。
第二種獲取通過js設定根元素的字型大小
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
</script>問題：為什麼要設定Html的font-size？
答：
1.是因為這裡是作為一個基礎數值，換一個方向去想，這裡先不乘以100以免產生無解。
例如：設計稿寬度是640px,有一個元素設計稿上的寬度是50px，裝置物理寬度是320px，那麼根據比率計算出實際涉筆裡面寬度是：50*(320/640)=25px；首先這裡沒有問題，實際上的寬度根據(320/640)這個比率計算出來了是25px，這個(320/640)相當於1rem。
2.
1）為了計算方便，我們後面把比率乘以了100，(320/640)100,那麼相對應這個元素在設定數值的時候就需要除以100了，這樣可以保證最後出來的數值不變，相對於0.5rem=50（320/640），最終出來的數值一直。
2）一般瀏覽器的最小字型是12px，如果font-size=（320/640）px，相當於font-size=0.5px,那麼這個數值就小於12px，會造成一些計算的錯誤，和一些奇怪的問題，乘以100後，font-size是50px。傳送門
測試程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maxinum-scale=1,mininum-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 +'px';
</script>
</head>
<body>
<p style="font-size:0.14rem">
<span>14px字型</span>
<span style="font-size:14px;">14px字型</span>
</p>
</body>
</html>1.物理畫素是320的顯示效果
2.物理畫素是640的顯示效果
目前感覺第二種方法比較好用，以後如果發現其他的更好的方法再更新…
堅持每天做一次筆記無論質量好壞…..