要掌握的知識點：
iphone6 螢幕尺寸為 375*667 （pt）也就是 網頁 全屏顯示時候 document.documentelement.clientwidth------可以理解為螢幕越大這個值越大（但是畫素不一定高）
dpr(裝置獨立畫素):2.0 可用（window.devicepixelratio）得出 （------------畫素越高 或者螢幕越小-------dpr越大）
window.devicepixelratio = 物理畫素 / dips
螢幕解析度為 750*1334 (px) ppi：326
對比 sony z2 螢幕尺寸為327*580
dpr(裝置獨立畫素):3.333
在android中，規定以160dpi為基準，1dp=1px。如果密度是320dpi，則1dp=2px，以此類推
思考：有個常見的現象，就是 pc端 一般字型 設定為12px 為正常字型 可以看清楚，但是把這個網頁放到手機端遊覽 字型就會變得很小，為什麼？
因為pc端dpr 一般都是1,所以當設定為12px時是 真正的12px，
而 手機端 現在大部分都是高畫質螢幕
例如， iphone6 dpr=2 那麼 pc上12px大小的字型，放到iphone6上就會被縮小兩倍，
sony z2 dpr=3.3 所以pc上12px大小的字型，放到z2上就會被縮小3.33倍，
有 dpr=1 的手機嗎？
有！在舉例 iphone 3gs
iphone 3gs 螢幕尺寸為 320*480 解析度 480*320px dpr=1
iphone 4 螢幕尺寸為 320*480 解析度 960*640px dpr =2
也就是說：pc上12px的字，在iphone3gs 上可以看清，且同pc上字型大小一樣，
pc上12px的字，在iphone4 上會縮小兩倍，也就是說pc上12px大小的字 在 iphone4上同樣大小 得寫24px才行（實際不用，請看下文）
有乙個div style='多少 px『 放到iphone4上 會是寬度全屏 是320px？ 還是 640px?
答案是 640px，
二
width=device-width，initial-scale=1,maximum-scale=1, minimum-scale=1">以上這段做移動端時候都會貼上進去，（上面討論的字看不清的情況就不存在了）為什麼
device-width的計算公式為：裝置的物理解析度/(devicepixelratio * scale)------可以理解為 device-width 為手機的螢幕大小
那這時候有乙個div style='多少 px『 放到iphone4上 會是寬度全屏 是320px？ 還是 640px?
答案是 320px
那麼此時可以總結前端設計工作流（網易做法）
1設計師 按照iphone6 畫素 設計 750px *1334 px
2 前端
0)
width=device-width，initial-scale=1,maximum-scale=1, minimum-scale=1">
注意：上面這句不加的時候 iphone6的 document.documentelement.clientwidth=980####上面這句加上的時候 iphone6的 document.documentelement.clientwidth=375
注意：上面這句不加的時候 iphone6的 document.documentelement.clientwidth=980####上面這句加上的時候 iphone6的 document.documentelement.clientwidth=375
注意：上面這句不加的時候 iphone6的 document.documentelement.clientwidth=980####上面這句加上的時候 iphone6的 document.documentelement.clientwidth=375
1)便於計算html
2)那麼這個時候想要讓寬度全屏只需設定body7.5rem
body3)動態改變html的font-size
得出結論： iphone6的時候 html的 font-size 為50px ( 375/7.5 +'px' = 50 px. )
body的 寬度為 7.5*50 = 375px 所以全屏了就
)同理sony z2 （加上viewport後）
document.documentelement.clientwidth = 360 #### 不加的話為document.documentelement.clientwidth = 980
得出結論： sony z2 的時候 html的 font-size 為50px ( 360/7.5 +'px' = 48 px. )body的 寬度為 7.5*48 = 360px 所以全屏了就
為什麼 兩個手機 在不加viewport 時候document.documentelement.clientwidth = 980？
因為當初移動裝置興起，想遊覽所有網頁 包括pc端的網頁，那這個時候問題來了，由於手機螢幕太小，網頁放置不下，所以出現了視口的概念，並預設為980，這樣相當於 （比如一般pc網頁視口寬度為1024）告訴遊覽器 你把1024寬的網頁 放到另乙個 980寬的是口裡，並且要全部顯示，所以系統會把網頁縮小980/1024 倍。放到980裡，當然真實的手機視口可能都沒有那麼大。比如iphone6 螢幕寬度 只有375 ，為什麼當初視口不定位375？ 因為 如果把1024寬的網頁 縮放到375寬的螢幕中 要縮小四倍 才能全部顯示，這樣網頁中的內容基本都會太小 而看不清！！
那麼我手機視口也定為1024呢？這樣倒是不縮放了，網頁和pc端一樣大，但是會出現橫向豎向滾動條太多，遊覽起來費事，所以定為980 是中間的乙個值
總結前端設計工作流（**做法）
舉例
0)iphone 6
width=device-width，initial-scale=0.5,maximum-scale=1, minimum-scale=1">2document.documentelement.clientwidth =750（不是原來的375）
3 html的 font:size = 75px4 如果想要body橫向全屏
body
移動端webapp自適應布局
請看這篇 hcysunyang的blog 一篇真正教會你開發移動端頁面的文章 二 width device width 這段 是讓布局視口的尺寸等於理想視口。裝置畫素比 dpr 裝置畫素個數 理想視口畫素個數 device width function doc,win win.addeventlis...
移動端web app自適應布局探索與總結
這樣做的弊端很明顯 做出來的頁面在各種手機端看起來的物理大小 高度 是一樣的，所以在大屏手機會覺得頁面稍小，小屏手機頁面稍大 如果要使高度能更好的適應各種手機螢幕，需要寫太多的 查詢樣式，效率低下 全屏背景跟頁面元素需要耦合時，元素位置的確定尤為困難 可能需要通過百分比去確定元素的橫向位置，但始終會...
移動端自適應布局
一 前言 一般在做移動端過程中，常用的有rem布局 px轉rem工具的使用，本文將針對vue專案介紹一種px轉vw布局的實現方案。本文所用腳手架為vue cli搭建的，如何搭建請看作者的另一篇文章 vue cli3搭建vue專案 二 正文 要想實現px轉vw的自動轉化，需要在專案中自少引入如下4個依...