viewport(視口)就是設備上用來顯示網頁的那一塊區域，但是viewport一般不局限于可視區域的大小，更多情況下都要比可視區域要大。移動設備上一般都為980px,除了windows系統手機為1024px。
移動設備上視口分為視覺視口(即屏幕大小，決定用戶看到什么)、布局視口(980px)，然后移動設備或按照一定比例縮放成視覺視口，用來約束CSS布局。
理想視口，我們可以把布局視口設為視覺視口，從而來影響css布局，只需要下面一行代碼來實現：

<meta name="viewport" content="width=device-width"/>

這行代碼告訴瀏覽器布局視口的寬度要和設備視口的寬度一樣。
我們也可以設置多個屬性:

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes,maximum-scale=2"/>

其中，
width=device-width 設置布局視口的寬度為屏幕寬度
initial-scale=[number] 設置初始的縮放比率
user-scalable=yes | no 是否允許頁面縮放，默認為yes
maximum-scale=[number] 允許最大放大比率
minimun-scale=[number] *允許最小縮小比率，當設定為1 等同于 user-scalable = no *

最后再提一個知識點，就是em 和rem:
em 相對于其父級元素去計算，而rem 相對于html節點字體大小。