編寫移動端高清屏頁面的1px邊框和線

2022-04-19 02:40:36 字數 1175 閱讀 5986

直接上**

.out .inner .m-t.m-t-o@media screen and (-webkit-min-device-pixel-ratio: 2).t:before .l:before .r:before .b:after .all:before }

<

body

>

<

div

class

="out"

>

<

h2 class

="one"

>測試的一行文字

h2>

<

div

class

="out"

>

<

div

class

="inner t"

>上邊框

div>

<

div

class

="inner l"

>左邊框

div>

<

div

class

="inner r"

>右邊框

div>

<

div

class

="inner b"

>下邊框

div>

<

div

class

="inner all"

>邊框

div>

div>

div>

<

div

class

="out m-t"

>

測試的另一行文字

<

hr class

="m-t-o"

>

hr>

div>

body

>

一種方法是

給div新增 position: relative;

再新增相對應的偽類

另一種方法是

把hr繪製成一畫素的橫線,hr樣式如下

效果圖:放大還是能看出一畫素處理後和沒處理的區別

移動端1px實現

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

移動端1px問題

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

移動端1px問題

在高清屏下,移動端的1px 會很粗。那麼為什麼會產生這個問題呢?主要是跟乙個東西有關,dpr devicepixelratio 裝置畫素比,它是預設縮放為100 的情況下,裝置畫素和css畫素的比值。window.devicepixelratio 物理畫素 css畫素目前主流的螢幕dpr 2 iph...