移動端1px問題

2021-09-25 02:10:43 字數 884 閱讀 1686

在高清屏下，移動端的1px 會很粗。

那麼為什麼會產生這個問題呢？主要是跟乙個東西有關，dpr(devicepixelratio)裝置畫素比，它是預設縮放為100%的情況下，裝置畫素和css畫素的比值。

window.devicepixelratio=物理畫素 /css畫素
目前主流的螢幕dpr=2（iphone8）,或者3 （iphone 8plus）。拿2倍屏來說，裝置的物理畫素要實現1畫素，而dpr=2，所以css畫素只能是0.5。一般設計稿是按照750來設計的，它上面的1px是以750來參照的，而我們寫css樣式是以裝置375為參照的，所以我們應該寫的0.5px就好了啊！試過了就知道，ios 8+系統支援，安卓系統不支援。

/* 偽元素+transform */


/* 原理是利用:before or :after來重做border,通過transform實現縮放 */


/* 上下左右一畫素邊框 */


.content-1px-b 


.content-1px-b::after 


.content-1px-t 


.content-1px-t::after 


.content-1px-l 


.content-1px-l::before 


.content-1px-r 


.content-1px-r::after 


/* 四條boder樣式 */


.content-1px 


.content-1px:after
優點： 所有場景都能滿足 支援圓角(偽類和本體類都需要加border-radius)

缺點： 對於已經使用偽類的元素(例如clearfix)，可能需要多層巢狀

移動端1px問題

在移動端頁面中設定邊框為1px時，在有的裝置中可能會發現邊框比1px要粗即1培訓1px 1px 裝置畫素比dpr 裝置畫素 css畫素 某一方向上 當dpr為2時1px實際為2px iphone6 dpr為3時1px為3px inphoex 所有看起來1px就會變粗 ios8下已經支援帶小數的px值...

移動端1px實現

新增css 1px邊框時，在手機上顯示為粗線，解決辦法就是利用偽類設定1px邊框，然後根據裝置畫素比進行y軸的縮放，使其表現為真正的1px.stylus的語法 1.定義乙個函式。找到要加1px的標籤，新增定位和偽類。border 1px color position relative after d...

移動端開發1px邊框問題

border 1px media only screen and webkit min device pixel ratio 2 優點 可以設定單條 多條錶框。缺點 更換顏色和樣式麻煩，某些裝置上會模糊。border 1px media only screen and webkit min devi...