物理像素(physical pixel)

一個(gè)物理像素是顯示器(手機(jī)屏幕)上最小的物理顯示單元，在操作系統(tǒng)的調(diào)度下，每一個(gè)設(shè)備像素都有自己的顏色值和亮度值。

設(shè)備獨(dú)立像素(density-independent pixel)

設(shè)備獨(dú)立像素(也叫密度無(wú)關(guān)像素)，可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系統(tǒng)中得一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素(比如: css像素)，然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。

所以說(shuō)，物理像素和設(shè)備獨(dú)立像素之間存在著一定的對(duì)應(yīng)關(guān)系，這就是接下來(lái)要說(shuō)的設(shè)備像素比。

設(shè)備像素比(device pixel ratio )

設(shè)備像素比(簡(jiǎn)稱dpr)定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系，它的值可以按如下的公式的得到：

設(shè)備像素比 = 物理像素 / 設(shè)備獨(dú)立像素 // 在某一方向上，x方向或者y方向

在javascript中，可以通過(guò)window.devicePixelRatio獲取到當(dāng)前設(shè)備的dpr。

在css中，可以通過(guò)-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和?-webkit-max-device-pixel-ratio進(jìn)行媒體查詢，對(duì)不同dpr的設(shè)備，做一些樣式適配(這里只針對(duì)webkit內(nèi)核的瀏覽器和webview)。

設(shè)計(jì)稿

　　以設(shè)計(jì)稿750*1334為基準(zhǔn)

retina屏精度顯示問(wèn)題

　　retina屏的高清是因?yàn)樗谕瑯拥膶捀呦氯菁{了比其他類型屏幕更多的像素點(diǎn)，這會(huì)導(dǎo)致1px問(wèn)題，明明css聲明的是1px，但是因?yàn)閞etin屏像素比是2或者3，所以1px最終被渲染成了2px或者3px

移動(dòng)端適配問(wèn)題

　　移動(dòng)端屏幕寬度有大有小，如何在不同屏幕上顯示相同的效果，假如需要一個(gè)div充滿全屏，在不設(shè)定百分比的情況下，如何實(shí)現(xiàn)？

rem em px選擇

　　rem是根據(jù)html根元素的font-size來(lái)設(shè)定大小，em是根據(jù)父元素的font-size來(lái)設(shè)定大小，px代表的是css像素，在設(shè)備像素比為1的時(shí)候px還可以對(duì)應(yīng)真實(shí)比率為1，如果縮放比為2，那么對(duì)應(yīng)的就是2了，在移動(dòng)端這三個(gè)單位如何選擇

解答：

　　先說(shuō)移動(dòng)端適配問(wèn)題

　　　　無(wú)retina屏幕的適配：無(wú)retina屏幕意味著設(shè)備像素比都是1，所以只需要考慮如何讓一個(gè)div撐滿全屏的設(shè)定在任意屏幕都可以實(shí)現(xiàn)，因?yàn)閞em代表的長(zhǎng)度是根據(jù)html根元素的dont-size來(lái)設(shè)定的，所以我們是否可以根據(jù)不同屏幕的大小來(lái)設(shè)定不同的font-size值，比如 在750px的屏幕上設(shè)置font-size為100px，這樣1rem=100px，所以7.5rem就等于750px，在寬度為375px的屏幕上如果也希望寫(xiě)7.5rem實(shí)現(xiàn)全屏，只需要設(shè)置font-size為50px就可以了，7.5*50=375px，所以我們?cè)趈s中獲取設(shè)備寬度，然后設(shè)置documentdocumentEletnt.fontSize? = deviceWidth/7.5;

　　　　retina屏幕適配：retina屏幕在于設(shè)備像素比是2或者3，這意味這同樣1px在實(shí)際表現(xiàn)可能是2px或者3px，但幸好這不會(huì)影響我們的的font-size的設(shè)定規(guī)則，所以這塊不做改動(dòng)

　　retina屏精度顯示問(wèn)題：在retina屏幕上一個(gè)像素點(diǎn)比普通屏幕多了三個(gè)像素點(diǎn)，這會(huì)導(dǎo)致兩個(gè)問(wèn)題，

　　　　1:1px會(huì)有變粗的效果

　　　　2:圖片顯示精度問(wèn)題，本來(lái)是一個(gè)200*200圖片，把它放入實(shí)際上是400*400的像素區(qū)域里，顯示肯定會(huì)有問(wèn)題

　　　　對(duì)于1px的解決方案是可以設(shè)置先設(shè)置border為1px，然后通過(guò)-webkit-device-pixel-ratio獲取設(shè)備像素比，如果像素比是3，我們?cè)O(shè)置元素的大小為正常的三倍，然后通過(guò)scale將元素縮小3倍，可得到1px的邊框，如果畫(huà)一條單獨(dú)的1px的線段，可以設(shè)置高度為1px，然后縮小3倍

　　　　對(duì)于圖片顯示精度問(wèn)題，雖然css上面顯示區(qū)域是200*200，但是實(shí)際像素顯示大小為400*400，所以這里我們應(yīng)該聽(tīng)過(guò)400*400的圖片，可以在css里面拿到設(shè)備像素比，根據(jù)不同像素比加載不同大小的圖片

　　　　關(guān)于rem em px的選擇問(wèn)題：

　　　　　　我們?cè)谏厦娼鉀Q移動(dòng)端適配的時(shí)候選擇了rem，但是字體要不要使用rem呢，舉一個(gè)極端例子，我們通過(guò)font-size動(dòng)態(tài)設(shè)置rem對(duì)應(yīng)的px，如果在一個(gè)非常非常狹窄的屏幕上（屏幕寬度為50px），那么1rem=50/7.5=6.6px，當(dāng)我們?cè)?50px的設(shè)計(jì)稿拿到字體大小是20px的時(shí)候，我們也許會(huì)把字體大小設(shè)置為0.2rem，最終在這個(gè)50px的屏幕上我們會(huì)看到多大的字體呢，就是0.2*6.6=1.32px，這肯定不是我們希望看到的結(jié)果，所以對(duì)于字體而言我們使用em來(lái)另外控制，通過(guò)在body控制body的font-size，達(dá)到不同屏幕下協(xié)調(diào)的字體大小設(shè)置：

　　　　

@media screen and (max-width: 321px) {body {font-size:16px} }@media screen and (min-width: 321px) and (max-width:400px) {body {font-size:17px} }@media screen and (min-width: 400px) {body {font-size:19px} }

　　關(guān)于canvas繪圖在retina屏幕顯示精度問(wèn)題：

　　　　同樣canvas使用的css像素單位繪制了圖像，本意是希望繪制200*200的圖像，但是因?yàn)槠?00*200的圖像繪制在了retina400*400的像素區(qū)域里面肯定會(huì)有問(wèn)題，這個(gè)時(shí)候可以放大canvas的繪圖區(qū)域至二倍，即設(shè)置canvas標(biāo)簽的width和height屬性為正常的2倍（如果設(shè)備像素比為3，則設(shè)置為3倍），然后在css里面在設(shè)置canvas的寬度為原來(lái)大小，比如我們的canvas是想繪制在200*200px的區(qū)域內(nèi)，我們?cè)赾ss里設(shè)置canvas為width:200px;height:200px,然后設(shè)置<canvas width="400" height="400"></canvas>

?

　　

?

?

?

?

?

　　　　

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

總結(jié)

以上是生活随笔為你收集整理的retina屏 适配问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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