說到前端肯定會遇到這樣一個事情, 2倍圖,3倍圖, em, rem, px 等等.
溝通起來你說的那個不是我說的那個單位.
這些單位都是在數(shù)字化時代產生的單位, 當然跟我們的數(shù)字信息相關的了.
在這里給大家說明一下每個單位的概念.
1. px 像素
px是像素的意思. 嗯, 原意就是 picture和element的縮寫英文叫 pixel. 用中文來解釋就是圖像元素的縮寫嘍.
拿一個圖片來講下面就是一個50pxx50px的圖片.
把這個圖放大后你會發(fā)現(xiàn).
這個圖片就是一個色塊組成的, 長50個寬50個的色塊.
像素里指的元素就是這色塊了. 一個色塊就是一個像素.
2. pt 蘋果手機, 字體, 印刷行業(yè)的單位
pt是 point的縮寫. 一點為單位, pt更早出現(xiàn)在印刷行業(yè). 1pt 等于 1/72英寸
印刷的時候根據打印機的 dpi不同導出來的像素也不同.
字體單位 pt的計算方式: px = pt * 1/72 * 瀏覽器的 dpi
一般瀏覽器默認的是96. 那么 9pt = 9 * 1/72 * 96 = 12px.
我估計根據顯示器不同瀏覽器獲取顯示的dpi.
對于 web 開發(fā)來說 使用pt這個單位基本已經淘汰了. 不推薦用這個單位.
在蘋果開發(fā)就不一樣了.
簡單明了.
1pt 等于 163ppi的時候 1px, 326ppi的時候是 2px, 401ppi的時候是 3px了.
6plus的時候實際顯示跟渲染的又不一樣. 詳細查看這個說明
ppi
ppi是指 pixcel per inch. 理解了像素之后這個就好理解了.
一英寸里有多少個像素點的意思, 1ppi 就是, 一英寸 一個像素 10ppi 就1英寸里有十個像素 ppi值 越高越清晰了
我們工作的時候在電腦顯示器里工作的.
再看一下你電腦的 ppi 是多少.
假如你的顯示器分辨率是1920x1080
PPI =（√19202+10802）/ 顯示器尺寸
在1920X1080分辨率下：
15英寸PPI是146.85
21.5英寸PPI是102.46
23英寸PPI是95.78
24英寸PPI是91.79
27英寸PPI是81.59
3. dp 安卓單位
dp也叫dip，是device independent pixels。跟蘋果的 pt理解成一樣的也可以的.
px = 1dp * (設備的dpi/160)
dpi指的是 dot per inch的意思.
一個英寸里有多少個點的意思, 安卓手機的話, 這里說的一個點就是指一個像素
印刷行業(yè)里使用的 dpi指的是打印機里的一個針噴出來的點, 這里就不詳細說明印刷行業(yè)的單位了.
em
em是 elment的縮寫. 一個元素為單位的. 這里的元素指的是 HTML``當前標簽里的font-size.
當前沒有設置 font-size的話就繼承上級元素了.
不推薦用這個單位
rem
rem是 root elment的縮寫. 一個跟元素為單位的. 根元素指的是 HTML html標簽里的font-size
H5開發(fā)的時候就用js來獲取屏幕像素. 動態(tài)計算html的 font-size 其他單位就用rem來統(tǒng)一后實現(xiàn)放大2倍,3倍的效果.
或者用view-port來實現(xiàn),
或者兩個并用情況也有
