前言：
首先，這篇文章講的是網頁在移動端的適配問題，這裏面沒有物理像素之類的事，這是兩個東西，別混爲一談！有些人爲了博眼球，一上來就是什麼物理像素，像素比之類的字眼，這倆東西對移動端確實有影響，但是沒那麼大，基礎的同學不需要去深究。
第二，適配是一件特簡單的事情，別想太複雜。像什麼數學換算之類的，如果數學不太好的同學也不用太焦慮，現在開發有很多輔助工具，世界上有幾個人能弄懂1+1爲什麼等於2？開開心心的敲代碼它不香麼？
第三，這篇文章講得會比較簡單直接，如果想要更加深入的瞭解，以及想知道爲什麼會有物理像素，像素比之類的概念，以及它們對於移動端的影響，請看下一篇
我們知道，隨着移動互聯網的發展，現在已經很少人會再電腦上去看網站了，所以作爲開發者，我們順其自然，必須要去優化自己的網站，讓它在手機上依然可以正常顯示，這也是爲什麼會出現適配這個問題的根本原因：要把一個那麼大的網站放到手機上去
首先，來看看手機上網站的效果
先來思考一個問題，如果想要像右邊手機上那樣，在頁面中顯示一個寬度爲屏幕寬度50%的色塊，應該怎麼做？
這個我估計大家都知道，寫個div，寬度50%不就好了？
.box{
width: 50%;
height: 200px;
background: #f00;
}
但是如果box的外面有一個父級，並且不確定父級的寬度時多少的時候，如何保證box的寬度是屏幕寬度的一半呢？
<div class="main">
<div class="box"></div>
</div>
因爲css中，寬度如果給百分比，那麼這個元素的寬度時根據其父級的寬度來計算的，也就是說在上面的代碼中，如果main的寬度是屏幕寬度的一半，那麼box的寬度就只有屏幕寬度的四分之一了，所以大多數情況下，在移動端上使用百分比都是不太好的一個單位。因爲它的參考對象是不固定的
所以我們需要一個具有唯一參考對象的相對單位，rem應運而生
先來看看rem 它是個相對單位，它相對的是根元素（html）的font-size大小，也就是說，如果html的font-size設置爲20px, 那麼一個rem就是20px;
我們正是利用這一點，讓頁面在不同寬度的手機上進行放大縮小，從而達到適配的目的的。當屏幕寬度大，我們只需要把html的font-size屬性變大，整個頁面就變大了，當屏幕寬度變小，font-size相應減小就可以了。這是移動端適配的基本思路，其他的都是萬變不離其宗。
那問題來了，怎麼做呢？
第一步，調整頁面視口設置
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
就是這串代碼，估計不說你們也知道是用來做什麼的。
爲什麼會有這個呢，那是因爲瀏覽器廠商在開發手機瀏覽器的時候，考慮到很多網站沒有針對移動端去做適配，所以不管手機多大，默認在手機上打開瀏覽器，裏面的寬度都是980px。
那既然我們都討論移動端適配了，那麼這個980就沒用了，我們的目的是要讓手機的分辨率還原，你手機分辨率大，自然寬度就大一些，分辨率小，頁面的寬度就小一些，這樣顯示的效果也是最合適的，眼睛看着才舒服。
第二步，把單位換算成rem
！！！這裏是重點，敲黑板啦。
還是剛纔的那個box，我現在把它的寬度變成寫成 5rem，這個數字隨便寫，無所謂 ma
body{
margin: 0;
}
.box{
width: 5rem;
height: 200px;
background: #0b2e13;
}
然後用手機打開，是這個樣子的：
現在我用了瀏覽器裏的模擬器，模擬iPhone6 Plus，這個手機的屏幕寬度時414px。然後我們知道文字大小在沒有設置的情況下一般是16px 所以現在的box寬度是80，上圖能看到
現在，我不想修改box的寬度值，也就是說這個5rem不動，但是我想讓box的寬度變成屏幕寬度的一半，也就是207px怎麼辦呢？
那麼我肯定就需要去修改html的font-size了，我們想要讓5rem 等於207，那麼1rem應該等於多少？這個算式大家應該沒問題吧？也就是207除以5，得到41.4了。數學不好的用計算器敲一下哈
現在我們去修改html的font-size，把它變成41.4 看看效果：
html{
font-size: 41.4px;
}
body{
margin: 0;
}
.box{
width: 5rem;
height: 200px;
background: #0b2e13;
}
果然，box的寬度就變成207了，也就是屏幕寬度的一半了。
現在我再換一個小一點的設備看看，換iPhone5
可以看到box的寬度還是207沒變，但是它已經佔據屏幕寬度的一大半了，但是我們要的效果是box依然只佔屏幕寬度的一半怎麼辦？那就再次修改html的font-size咯。
目前iPhone5 的寬度可以看到是320，一半也就是160。所以用160除以5 得到32。所以設置html的font-size爲32px, 得到效果：
果然，只要我們修改html的font-size就能達到效果，但是我們不可能說換一個設備就去換一下html的font-size呀，因爲我們不知道用戶用的是什麼手機。所以這時候我們就需要找人幫忙了，找誰呢？找js，js我們會，沒問題，不需要太高深的js技巧。
但是找到js怎麼做呢？ 我們不妨來觀察一下。
第一次用iPhone6去看的時候，iPhone6的寬度時414，然後font-size設置成41.4px；
第二次換iPhone5，iPhone的寬度是320，然後需要把font-size設置成32px;
發現問題了麼？ 再仔細看看？有沒有發現font-size總是屏幕寬度的十分之一？
那麼這時候好辦了，我們只需要用js獲取一下屏幕寬度，然後動態修改一下html的font-size不就好了？So Easy！
var Root = document.documentElement;
Root.style.fontSize = window.innerWidth/10 + 'px';
現在把css裏的font-size設置去掉就OK啦！
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var Root = document.documentElement;
Root.style.fontSize = window.innerWidth/10 + 'px';
</script>
<style>
body{
margin: 0;
}
.box{
width: 5rem;
height: 200px;
background: #0b2e13;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
這是現在的所有代碼，現在box在任何手機上顯示都是屏幕寬度的一半啦！
不過別急，還有一個問題！！！ box的5rem到底是怎麼來的？
現在我們知道5rem代表屏幕寬度的一半，如果設計稿是750寬度，那麼代表的就是 375px,
那如果再設計搞上量得一個元素的寬度是180呢？312呢?
不着急，我們來看看375px和5rem的關係，
375px 等於 5個rem， 那麼1個rem等於多少px ? 75px對吧
那麼，如果設計稿上量到的寬度是182px，那麼等於多少rem呢？
嗯，有點暈，來來來，列一下算式：
1rem = 75px
182px = ?rem
是這樣沒錯吧，那麼換算一下是不是182除以75, 得到的就是rem的個數了呢？
所以，最終的結果就是：設計稿上，量得的寬度直接除以75 得到的就是rem數了
換算之後，得到182px = 2.4267rem
我們把這個結果放到代碼上去看看（注意，設計稿的寬度時750，所以放到750的設備上纔會1：1還原）
.box{
width: 2.4267rem;
height: 200px;
background: #0b2e13;
}
現在我們就用一個寬度750的設備去看看，得到的寬度會不會是182呢？
如此，我們的移動端適配就算是完美成功啦！
總結移動端適配：
1，設置視口
2，用js動態修改html的font-size 如: font-size = 屏幕寬度 / 10
3，換算rem 如： 182 / 75
最後的最後，你有沒有發現這個75有點特殊呢？嘿嘿，等你有更重大的發現哦~