成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

高清屏下的1px邊框問(wèn)題

JaysonWang / 1062人閱讀

摘要：為了提高用戶體驗(yàn)，需要兼容不同設(shè)備，使邊框真正顯示為個(gè)物理像素的寬度大多情況下我們還是希望邊框是盡可能細(xì)。解決方法具體寫法如下缺點(diǎn)屏的瀏覽器可能不認(rèn)識(shí)的邊框，將會(huì)把它解釋成，沒(méi)有邊框。

基本概念 像素(css pixels)

css像素或邏輯像素，單位是px，它是一個(gè)相對(duì)單位，在不同dpr(devicePixelRatio 設(shè)備像素比)設(shè)備中，1px代表的物理像素是不同的。

物理像素(device pxels)

顯示屏是由一個(gè)個(gè)物理像素點(diǎn)組成的，通過(guò)控制每個(gè)像素點(diǎn)的顏色，使屏幕顯示出不同的圖像，屏幕從工廠出來(lái)那天起，它上面的物理像素點(diǎn)就固定不變了，單位pt。

css像素和物理像素的關(guān)系

dpr = 物理像素 / css像素

iPhone X的dpr和橫向css像素

而iPhone X橫向分辨率剛好是1125

1px問(wèn)題

普通屏幕的1px就是物理像素的1px，而Retina屏的1px就不等于1px了，這就造成了在不同設(shè)備中1px的實(shí)際寬度不一致的問(wèn)題。

為了提高用戶體驗(yàn)，需要兼容不同dpr設(shè)備，使1px邊框真正顯示為1個(gè)物理像素的寬度（大多情況下我們還是希望1px邊框是盡可能細(xì)）。

解決方法 0.5px

具體寫法如下

缺點(diǎn)：
retina 屏的瀏覽器可能不認(rèn)識(shí)0.5px的邊框，將會(huì)把它解釋成0px，沒(méi)有邊框。包括 iOS 7 和 之前版本，OS X Mavericks 及以前版本，還有 Android 設(shè)備。

偽元素 + transform


優(yōu)點(diǎn)：瀏覽器兼容性非常好

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114163.html

相關(guān)文章

  • #yyds干貨盤點(diǎn)#——css移動(dòng)端兼容

    摘要：移動(dòng)端的問(wèn)題描述的邊框。產(chǎn)生原因首先先要了解一個(gè)概念設(shè)備像素比，它是默認(rèn)縮放為的情況下，設(shè)備像素和邏輯像素的比值。解決方式在滾動(dòng)容器上增加滾動(dòng)方法微軟雅黑設(shè)置設(shè)置外部為設(shè)置內(nèi)容元素為。內(nèi)部元素超出即產(chǎn)生滾動(dòng)，超出的部分隱藏。 移動(dòng)端的 1px問(wèn)題描述：1px 的邊框。在高清屏下，移動(dòng)端的 1px 會(huì)很粗。產(chǎn)生原因：首先先要...

    lwx12525 評(píng)論0 收藏0

  • 前端遇到的那些技術(shù)難點(diǎn)

    摘要：目前主流的屏幕或者。產(chǎn)生原因在中，手指按住屏幕上下拖動(dòng)，會(huì)觸發(fā)事件?；蛘呖梢约尤胛业拈_發(fā)交流群相互學(xué)習(xí)，我們會(huì)有專業(yè)的技術(shù)答疑解惑如果你覺(jué)得這篇文章對(duì)你有點(diǎn)用的話，麻煩請(qǐng)給我們的開源項(xiàng)目點(diǎn)點(diǎn)不勝感激 移動(dòng)端兼容css篇移動(dòng)端的 1px問(wèn)題描述：1px 的邊框。在高清屏下，移動(dòng)端的 1px 會(huì)很粗。產(chǎn)生原因：首先先要了解一個(gè)...

    番茄西紅柿 評(píng)論0 收藏2637

  • 一次搞清楚移動(dòng)端適配這幾個(gè)坑爹的單位慨念

    摘要：真的是給我們新手學(xué)習(xí)移動(dòng)端適配造成不少困惑英語(yǔ)真的很重要呀。細(xì)節(jié)高清屏上的處理其實(shí)并不是所有做移動(dòng)端適配的人都一定會(huì)遇到這個(gè)問(wèn)題。 一次搞清楚移動(dòng)端這幾個(gè)坑爹的單位慨念 目錄: 一、讓坑爹的單位,不再坑爹 二、需要準(zhǔn)備什么樣的設(shè)計(jì)稿 三、rem方案的原理和細(xì)節(jié) 高清屏上,位圖的處理 高清屏上,關(guān)于border: 1px的處理 移動(dòng)端屏幕的自動(dòng)適配的處理 移動(dòng)端屏幕上字體大小的處理...

    objc94 評(píng)論0 收藏0

  • 一次搞清楚移動(dòng)端適配這幾個(gè)坑爹的單位慨念

    摘要：真的是給我們新手學(xué)習(xí)移動(dòng)端適配造成不少困惑英語(yǔ)真的很重要呀。細(xì)節(jié)高清屏上的處理其實(shí)并不是所有做移動(dòng)端適配的人都一定會(huì)遇到這個(gè)問(wèn)題。 一次搞清楚移動(dòng)端這幾個(gè)坑爹的單位慨念 目錄: 一、讓坑爹的單位,不再坑爹 二、需要準(zhǔn)備什么樣的設(shè)計(jì)稿 三、rem方案的原理和細(xì)節(jié) 高清屏上,位圖的處理 高清屏上,關(guān)于border: 1px的處理 移動(dòng)端屏幕的自動(dòng)適配的處理 移動(dòng)端屏幕上字體大小的處理...

    elva 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<