物理像素

設備屏幕實際擁有的像素點。比如一個圖片，細分最小單位就是像素，也就是說圖片是由許多的像素構(gòu)成。

一個設備生產(chǎn)出來，他們的像素就已經(jīng)確定了，iphone5的分辨率是640*1136px，代表屏幕的寬是640px，高是1136px。

邏輯像素

也叫“設備獨立像素”（Device Independent Pixel,DPI）可以理解為反映在CSS里的像素點，也就是說CSS像素是邏輯像素的一種。

CSS像素的單位也叫PX。他是圖像顯示的基本單元。

CSS像素=設備獨立像素=邏輯像素

?

注：

（1）為了保證閱讀體驗的一致性，CSS像素可以自動在不同設備之間調(diào)節(jié)。

（2）默認情況下，一個CSS像素等于一個物理像素的寬度。但是在高像素密度的設備上，CSS像素甚至在默認情況下相當于多個物理像素的尺寸。比如iPhone的屏幕對比一般的手機屏幕會看起來更精細清晰一些。

（3）iPhone6,7,8都是兩倍屏手機，即一個CSS像素等于兩個物理像素。iPhone6Plus等于三倍屏手機，即一個CSS像素等于3個物理像素。

（4）以iPhone6為例，設計稿給出一個圖片的寬高為40*40，在實際開發(fā)中要除以2，寬高要寫成20*20，因為iPhone6是兩倍屏手機。

?

設備像素比（Device Pixel Ratio，DPR）

表示一個設備的物理像素與邏輯像素的比。

像素為什么會有“物理”和“邏輯”之分，他們之間有什么區(qū)別？

　　在很久以前，的確沒有區(qū)別，CSS里寫1px，屏幕就給你渲染成1個實際的像素點，所以DPR=1。

　　但是后來蘋果公司為其產(chǎn)品mac、iPhone等的屏幕配置了Retina高清屏，也就是說這種屏幕擁有的物理像素點比非高清屏多4被甚至更多。如果還按照DPR=1進行展示，那么同一張圖片在高清屏上顯示的區(qū)域面積會是非高清屏的1/4,這樣的話圖片在屏幕上的展示面積大大縮小，也就會導致看不清的問題。

　　舉個栗子，iPhone6的物理像素是750*1334，那么它的邏輯像素是多少? 我們只需要打印一下screen.width和screen.height就知道了，結(jié)果是375*667，這就是它的邏輯像素，所以DPR=2，我們也可以通過打印window.devicePixelRatio來獲取設備像素比。

?

分辨率

也叫解析度，可以從屏幕分辨率和圖像分辨率兩個方向來分類。

屏幕分辨率：是屏幕圖象的精密度，是指顯示器所能顯示的像素有多少，即顯示器可以顯示的小方塊有多少。

• 顯示器的可顯示的小方塊越多，畫面就越精細，同樣的屏幕區(qū)域內(nèi)能顯示的信息也就越多。
• 顯示分辨率一定的情況下，顯示屏越小圖像就越清晰，反之，顯示屏大小固定時，顯示分辨率越高圖像越清晰。(小方塊一樣多的情況下，顯示屏越小越清晰；屏幕大小一樣大的時候，小方塊越多圖形越清晰)

一個邏輯像素等于多少個物理像素是由設備本身決定的，可以通過DPR也就是設備像素比window.devicePixelRatio獲知。

?

像素密度（PPI）

像素密度的數(shù)值越高，代表顯示屏能夠以越高的密度顯示圖像，畫面的細節(jié)就會越豐富。

以Retina屏幕為例，他并不是象普通顯示器那樣通過增大尺寸來增加分辨率，而是靠提升屏幕單位面積內(nèi)的像素數(shù)量，即像素密度來提升分辨率，這樣就有了高像素密度屏幕。

?

移動端1物理像素邊框的實現(xiàn)

問題產(chǎn)生的原因：

Retina屏會以2個（乃至3個）物理像素來顯示一個CSS像素（1px）所以在CSS中指定的1px邊框?qū)嶋H上占用2個以上的物理像素，使得用戶體驗較差。

解決方案：

（1）使用0.5px（CSS像素）

問題：并不是所有瀏覽器都能識別0.5px，只在Firefox和Safari 8+支持，安卓不支持。有的系統(tǒng)里0.5px會被當作0px來處理。

?

（2）用媒體查詢根據(jù)設備像素比用“偽元素+transform”對邊框進行縮放。

對于2倍屏 transform:scale(0.5)

對于三倍屏? transform:scale(0.33)

可以使用CSS的-webkit-min-device-pixel-ratio媒體查詢針對不同的DPR作出處理。下面以Less代碼為例：

@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){.border-bt-1px{position: relative;:after{position: absolute;left:0;
　　　　　　 bottom: 0;width: 100%;height: 1px;background: #ee2c2c;transform: scaleY(0.5);}} }

?

（3）使用box-shadow模擬邊框

.box-shadow-1px{box-shadow: 0px 1px 1px -1px #ee2c2c; }

優(yōu)點：代碼好，兼容性好。缺點：邊框有陰影，顏色淺

?

?

?

rpx

rpx是微信小程序解決自適應屏幕尺寸的尺寸單位。微信小程序規(guī)定的屏幕寬度是750rpx。

無論是在iPhone6上面還是其他機型上面都是750rpx的屏幕寬度。拿iPhone6來講，屏幕寬度為375px,把它分為750rpx后，1rpx=0.5px=1物理像素

rpx換算成px等于屏幕寬度/750??

?

轉(zhuǎn)載于:https://www.cnblogs.com/xiaoan0705/p/11268584.html

總結(jié)

以上是生活随笔為你收集整理的逻辑像素与物理像素的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。