大家好，我是IT修真院深圳分院第4期學員梁耀，一枚正直純潔善良的web程序員。
今天給大家分享：手機分辨率和網(wǎng)頁中的px是一回事嗎？
【css-4】
分享人：梁耀
背景介紹
什么是絕對長度單位？什么是相對長度單位？
絕對長度單位：in（inch英寸）、cm（厘米）、mm（毫米）、pt（磅）、pc（pica）。in、cm、
mm和實際中的常用單位完全相同。pt是標準印刷上常用的單位，72pt的長度為1英寸。pc也是印刷上用
的單位，1pc的長度為12磅。絕對長度單位，雖然理解起來很容易，但是在網(wǎng)頁的設(shè)計中很少用到。
相對長度單位：是網(wǎng)頁設(shè)計中使用最多的長度單位，包括px、em、rem等。
什么是屏幕尺寸、屏幕分辨率、屏幕像素密度？
屏幕尺寸：
指屏幕的對角線的長度，單位是英寸，1英寸=2.54厘米。常見的屏幕尺寸有4.2、4.7、5.5、
6.0等。
屏幕分辨率：
指在橫縱向上的像素點數(shù)，單位是px，1px=1個像素點。一般以縱向像素*橫向像素來表示一
個手機的分辨率，如1960*1080。（這里的1像素值得是物理設(shè)備的1個像素點
屏幕像素密度：
屏幕上每英寸可以顯示的像素點的數(shù)量，單位是ppi，即“pixels per inch”的縮寫。屏幕
像素密度與屏幕尺寸和屏幕分辨率有關(guān)，在單一變化條件下，屏幕尺寸越小、分辨率越高，像素密度
越大，反之越小。
計算像素密度的公式：
通過勾股定理算出對角線的分辨率，然后在除以屏幕的尺寸
知識剖析：
viewport的概念
移動設(shè)備上的viewport就是設(shè)備的屏幕上能用來顯示我們的網(wǎng)頁的那一塊區(qū)域
一般來講，移動設(shè)備上的viewport都是要大于瀏覽器可視區(qū)域的，這是因為考慮到移動設(shè)備的分辨率
相對于桌面電腦來說都比較小，所以為了能在移動設(shè)備上正常顯示那些傳統(tǒng)的為桌面瀏覽器設(shè)計的網(wǎng)
站，移動設(shè)備上的瀏覽器都會把自己默認的viewport設(shè)為980px或1024px（也可能是其它值，這個是由
設(shè)備自己決定的），但帶來的后果就是瀏覽器會出現(xiàn)橫向滾動條，因為瀏覽器可視區(qū)域的寬度是比這
個默認的viewport的寬度要小的。下圖列出了一些設(shè)備上瀏覽器的默認viewport的寬度。
width 設(shè)置layout viewport? 的寬度，為一個正整數(shù)，或字符串"width-device"
initial-scale 設(shè)置頁面的初始縮放值，為一個數(shù)字，可以帶小數(shù)
minimum-scale 允許用戶的最小縮放值，為一個數(shù)字，可以帶小數(shù)
maximum-scale 允許用戶的最大縮放值，為一個數(shù)字，可以帶小數(shù)
height 設(shè)置layout viewport? 的高度，這個屬性對我們并不重要，很少使用
user-scalable 是否允許用戶進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許
常見問題
當UI設(shè)計師給一個圖的時候，為什么同是一個尺寸（px）而兩者的大小不一樣？
解決方案
在Android中，規(guī)定以160dpi為基準，1dp=1px。如果密度是320dpi，則1dp=2px，以此類推。 Android和IOS都會通過轉(zhuǎn)換系數(shù)讓控件適應屏幕的尺寸。一個按鈕給了44*44dp的大小，在160dpi密度的時候， 按鈕就是44*44px大??；在320dpi密度的時候，按鈕就是88*88px的大小。不需要我們?nèi)鴮懚嗵壮叽纭?/p>
擴展思考
移動端常用的方案有哪些？
簡單方法簡單解決(使用PX)
代表：拉鉤網(wǎng)
彈性布局
開發(fā)原則：文字流式，控件彈性，圖片等比縮放
使用rem布局
代表：網(wǎng)易、淘寶
使用rem布局結(jié)合在html上根據(jù)不同分辨率設(shè)置不同font-size有很多不好解決的麻煩， 網(wǎng)易是如何解決的呢？最根本的原因在于，網(wǎng)易頁面上html的font-size不是預先通過媒介查詢在css里定義好的， 而是通過js計算出來的
參考一 :
參考二：
? ? 移動前端自適應適配方案
Q1：
A1：像現(xiàn)在的主流是設(shè)定，UI設(shè)計師一般都是以iPhone6為基準，設(shè)計UI圖，我們獲取到
圖形之后，在經(jīng)過計算（我覺得公司會有文檔計算好了的），按照規(guī)定文檔來編寫頁面就可以
Q2：
A2：手機出廠的時候以及設(shè)置好的分辨率，是不可更改的，如小米mix2的分辨率就是1980px*2216px
Q3：
A3：em是相對父級，rem相對根元素；一般在寫響應式頁面的時候，通常是使用rem
Q4：
A4：js計算比較簡便而且代碼量很少；css媒體查詢就比較繁瑣，每一個不同分辨率下都需要重新設(shè)置
Q5：
A5：不會，像淘寶，網(wǎng)易這些大型網(wǎng)站都用這種方式，可見其優(yōu)越性
