物理像素

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

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

邏輯像素

也叫“設(shè)備獨(dú)立像素”（Device Independent Pixel,DPI）可以理解為反映在CSS里的像素點(diǎn)，也就是說(shuō)CSS像素是邏輯像素的一種。

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

CSS像素=設(shè)備獨(dú)立像素=邏輯像素

?

注：

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

（2）默認(rèn)情況下，一個(gè)CSS像素等于一個(gè)物理像素的寬度。但是在高像素密度的設(shè)備上，CSS像素甚至在默認(rèn)情況下相當(dāng)于多個(gè)物理像素的尺寸。比如iPhone的屏幕對(duì)比一般的手機(jī)屏幕會(huì)看起來(lái)更精細(xì)清晰一些。

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

（4）以iPhone6為例，設(shè)計(jì)稿給出一個(gè)圖片的寬高為40*40，在實(shí)際開發(fā)中要除以2，寬高要寫成20*20，因?yàn)閕Phone6是兩倍屏手機(jī)。

?

設(shè)備像素比（Device Pixel Ratio，DPR）

表示一個(gè)設(shè)備的物理像素與邏輯像素的比。

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

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

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

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

?

分辨率

也叫解析度，可以從屏幕分辨率和圖像分辨率兩個(gè)方向來(lái)分類。

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

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

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

?

像素密度（PPI）

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

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

?

移動(dòng)端1物理像素邊框的實(shí)現(xiàn)

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

Retina屏?xí)?個(gè)（乃至3個(gè)）物理像素來(lái)顯示一個(gè)CSS像素（1px）所以在CSS中指定的1px邊框?qū)嶋H上占用2個(gè)以上的物理像素，使得用戶體驗(yàn)較差。

解決方案：

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

問(wèn)題：并不是所有瀏覽器都能識(shí)別0.5px，只在Firefox和Safari 8+支持，安卓不支持。有的系統(tǒng)里0.5px會(huì)被當(dāng)作0px來(lái)處理。

?

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

對(duì)于2倍屏 transform:scale(0.5)

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

可以使用CSS的-webkit-min-device-pixel-ratio媒體查詢針對(duì)不同的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)點(diǎn)：代碼好，兼容性好。缺點(diǎn)：邊框有陰影，顏色淺

?

?

?

rpx

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

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

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

?

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

總結(jié)

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

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