viewport

　　PX的知識點：

在PC端中物理像素PX和CSS的像素是如出一轍的， 桌面的1px就是css樣式的1px，
可是在移動端中會出現問題：
好比iphone5的物理像素是640px＊1136px，可是它的界面大小隻有320px＊568px；

由於手機的屏幕寬度有限，
在手機瀏覽器查看PC的網頁總會出現一個界面顯示不全的狀況，因此要作特殊處理，
因此市面上的手機瀏覽器視圖viewport作了統一，基本都爲980px或者1024px，避免網頁顯示不全的問題；

可是移動互聯網到來了， 咱們要講究用戶體驗， 給用戶看的網站字不能過小， 按鈕不能過小， 因此要解決這個問題；
width＝device－width的意思是讓一整個瀏覽器的寬度爲設備寬度；
並且不一樣設備的device－width不一樣的；
可是會有一個問題：
假設有一個移動設備的寬度爲340px，
那麼他的viewport就是340px；
若是一個div超過了340，
就會溢出而且出現滾動條；
咱們用其餘移動設備寬度大於340px的進行測試：
就會出現滾動了，由於移動設備的寬度是不定的，
因此移動互聯網講究的都是百分比佈局， 和px說再見

ppi和dpi是同樣的，都是英寸內的像素密度；
dpr是一個倍數： 物理像素／實際寬度