1.背景介紹
首先，什麼是viewport。
通俗的講，移動裝置上的viewport就是裝置的螢幕上能用來顯示我們的網頁的那一塊區域。
再具體一點，就是瀏覽器上用來顯示網頁的那部分區域，但viewport又不侷限於瀏覽器可視區域的大小，
它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。
什麼是絕對長度單位？什麼是相對長度單位？
絕對長度單位：in（inch英吋）、cm（厘公尺）、mm（公釐）、pt（磅）、pc（pica）。 in、cm、mm和實際中的
常用單位完全相同。
pt是標準印刷上常用的單位，72pt的長度為1英吋。
pc也是印刷上用的單位，1pc的長度為12磅。絕對長度單位，雖然理解起來很容易，但是在網頁的設計中很少用到。
相對長度單位：是網頁設計中使用最多的長度單位，包括px、em、rem等。
2.知識解析
什麼是螢幕尺寸、螢幕解析度、螢幕畫素密度？
螢幕尺寸:指螢幕的對角線的長度，單位是英吋，1英吋=2.54厘公尺。常見的螢幕尺寸有4.2、4.7、5.5、6.0等
螢幕解析度：指在橫縱向上的畫素點數，單位是px，1px=1個畫素點。 一般以縱向畫素*橫向畫素來表示乙個手機的分
辨率，如1960*1080。(這裡的1畫素值得是物理裝置的1個畫素點)
螢幕畫素密度：螢幕上每英吋可以顯示的畫素點的數量，單位是ppi，即「pixels per inch」的縮寫。
螢幕畫素密度與螢幕尺寸和螢幕解析度有關，在單一變化條件下，螢幕尺寸越小、解析度越高，畫素密度越大，
反之越小
如何計算畫素密度？
計算畫素密度的公式： 通過勾股定理算出對角線的解析度，然後在除以螢幕的尺寸
viewport的概念
移動裝置上的viewport就是裝置的螢幕上能用來顯示我們的網頁的那一塊區域 一般來講，
移動裝置上的viewport都是要大於瀏覽器可視區域
的，這是因為考慮到移動裝置的解析度相對於 桌面電腦來說都比較小，所以為了能在移動裝置上正常顯示那些傳統的為桌面瀏覽器設計
的**， 移動裝置上的瀏覽器都會把自己預設的viewport設為980px或1024px（也可能是其它值，這個是由裝置自己決定的）， 但帶來
的後果就是瀏覽器會出現橫向滾動條，因為瀏覽器可視區域的寬度是比這個預設的viewport的寬度要小的。
width 設定layout viewport 的寬度，為乙個正整數，或字串"width-device"
initial-scale 設定頁面的初始縮放值，為乙個數字，可以帶小數
maximum-scale 允許使用者的最大縮放值，為乙個數字，可以帶小數
minimum-scale 允許使用者的最小縮放值，為乙個數字，可以帶小數
user-scalable 是否允許使用者進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許
height 設定layout viewport 的高度，這個屬性對我們並不重要，很少使用
3.常見問題
當ui設計師給乙個圖的時候，為什麼同是乙個尺寸（px）而兩者的大小不一樣
4.解決方案
在android中，規定以160dpi為基準，1dp=1px。如果密度是320dpi，則1dp=2px，以此類推。 android和ios都會通過轉
換係數讓控制項適應螢幕的尺寸。乙個按鈕給了44*44dp的大小，在160dpi密度的 時候，
按鈕就是44*44px大小；在320dpi密度的時候，按鈕就是88*88px的大小。不需要我們去書寫多套尺寸
5.編碼實戰
6.擴充套件思考
移動端常用的方案有哪些？
簡單方法簡單解決(使用px)
代表：拉鉤網 彈性布局
使用rem布局
代表：網易、**
使用rem布局結合在html上根據不同解析度設定不同font-size有很多不好解決的麻煩， 網易是如何解決的呢？
最根本的原因在於，
網易頁面上html的font-size不是預先通過媒介查詢在css裡定義好的， 而是通過js計算出來的。
問題；1.
計算畫素密度的公式：
勾股定理算出對角線的解析度：√(1920²+1080²)≈2203px
對角線解析度除以螢幕尺寸：2203/5≈440dpi。
2.什麼是物理解析度
有關手機LCD解析度的一些概念
1 ppi pixels per inch 每英吋螢幕所擁有的畫素數。畫素密度越大，顯示細節越豐富。計算方法 畫素密度 螢幕尺寸 注 螢幕尺寸單位為英吋 例 解析度為1280 720 螢幕寬度為6英吋 計算所得畫素密度約等於245 2 720p 1080i 1080p 2k 4k 其中的i inte...
android中的解析度 行高和字型大小
想要計算下在乙個textview中最多能列印多少字元，但是理論計算結果和實際結果卻不一致。先說下我的演算法 獲取螢幕的解析度 px width height 獲取螢幕密度 density 設定字型大小 sp textsize 設定單倍行距 sp singlelinespace 那麼字型的行數 含行距...
解決高解析度看網頁字型太小問題的乙個方法
有些膝上型電腦或lcd顯示器的最佳解析度大於1024x768，例如sxga 的1400x1050，我們一般會在windows的顯示選項裡設定使用大字型，以便更容易閱讀。但是ie瀏覽器預設是使用96dpi解析度來顯示的，且不允許使用者在選項裡選擇使用自定義的解析度，所以看很多網頁時字型會變得很小以至於...