當我們對移動端進行頁面適配時，我們首先應該了解到meta viewport，media query，以及動態rem。
什么是Viewport?
手機瀏覽器會把頁面放入到一個虛擬的“視口”（viewpoint）中，但viewport又不局限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域大，也可能比瀏覽器的可視區域小。通常這個虛擬的“視口”（viewport）比屏幕寬，會把網頁擠到一個很小的窗口。
如果不顯示地設置viewport，那么瀏覽器就會把width默認設置為980。但后果是瀏覽器出現橫向滾動條，因為瀏覽器可視區域的寬度比默認的viewport的寬度小。
然后瀏覽器引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
meta viewport 的6個屬性:
- width ： 設置viewport 的寬度
- height： 設置viewport 的高度
- initial-scale ： 設置頁面的初始縮放值
- minimum-scale ：允許用戶的最小縮放值
- maximum-scale：允許用戶的最大縮放值
- user-scalable： 是否允許用戶進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許
特殊說明：（IE6,7,8）支持，需要使用css3mediaqueries.js
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
3個viewport:
（1）layout viewport
如果把移動設備上瀏覽器的可視區域設為viewport的話，某些網站會因為viewport太窄而顯示錯亂，所以這些瀏覽器就默認會把viewport設為一個較寬的值，比如980px，使得即使是那些為PC瀏覽器設計的網站也能在移動設備瀏覽器上正常顯示。這個瀏覽器默認的viewport叫做 layout viewport。layout viewport的寬度可以通過 document.documentElement.clientWidth來獲取。
（2）visual viewport
layout viewport的寬度是大於瀏覽器可視區域的寬度的，所以還需要一個viewport來代表瀏覽器可視區域的大小，這個viewport叫做 visual viewport。visual viewport的寬度可以通過 document.documentElement.innerWidth來獲取。
（3）ideal viewport
ideal viewport是一個能完美適配移動設備的viewport。首先，不需要縮放和橫向滾動條就能正常查看網站的所有內容；其次，顯示的文字、圖片大小合適，如14px的文字不會因為在一個高密度像素的屏幕里顯示得太小而無法看清，無論是在何種密度屏幕，何種分辨率下，顯示出來的大小都差不多。這個viewport叫做 ideal viewport。
ideal viewport並沒有一個固定的尺寸，不同的設備有不同的ideal viewport。例如，所有的iphone的ideal viewport寬度都是320px，無論它的屏幕寬度是320還是640。
ideal viewport 的意義在於，無論在何種分辨率的屏幕下，針對ideal viewport 而設計的網站，不需要縮放和橫向滾動條都可以完美地呈現給用戶。