移動端開發1px邊框問題

2021-10-19 18:50:31 字數 1971 閱讀 9295

.border_1px

@media only screen and

(-webkit-min-device-pixel-ratio:2)

}

優點:可以設定單條、多條錶框。

缺點:更換顏色和樣式麻煩,某些裝置上會模糊。

.border_1px

@media only screen and

(-webkit-min-device-pixel-ratio:

2}

優點:可以設定單條、多條錶框。

缺點:更換顏色和樣式麻煩,某些裝置上會模糊

border1px-

after()

content ' '

position absolute

box-sizing border-box

pointer-events none

border-

all($color=#ccc, $radius=0)

@media only screen and

(-webkit-min-device-pixel-ratio:

1.5)

} @media only screen and

(-webkit-min-device-pixel-ratio:2)

} @media only screen and

(-webkit-min-device-pixel-ratio:3)

}

優點:可以滿足所有場景,且修改靈活。

缺點:對於已使用偽類的元素要多層巢狀。

/* 設計稿是750,採用1:100的比例,font-size為100 * (docel.clientwidth * dpr / 750) */

var dpr, rem, scale;

var docel = document.documentelement;

var fontel = document.

createelement

('style');

var metael = document.

queryselector

('meta[name="viewport"]');

dpr = window.devicepixelratio ||1;

rem =

100*

(docel.clientwidth * dpr /

750)

;scale =

1/ dpr;

// 設定viewport,進行縮放,達到高畫質效果

metael.

setattribute

('content'

,'width='

+ dpr * docel.clientwidth +

',initial-scale='

+ scale +

',maximum-scale='

+ scale +

', minimum-scale='

+ scale +

',user-scalable=no');

// 設定data-dpr屬性,留作的css hack之用,解決模糊問題和1px細線問題

docel.

setattribute

('data-dpr'

, dpr)

;// 動態寫入樣式

docel.firstelementchild.

(fontel)

;fontel.innerhtml =

'html'

;

用js根據螢幕尺寸和dpr精確地設定不同螢幕所應有的rem基準值和initial-scale縮放值,完美解決了1px細線問題

移動端1px邊框實現

一看上篇博文的發布日期,就知道自己好久沒有寫技術文章了。一是可能工作比較忙,二是可能自己也比較懶散啦。今天重新敲起鍵盤。來跟大家分享乙個最近新學到的技術。一是為鞏固自己的掌握程度。也希望能幫到有需要的同學。大神看到的話可以提點意見。幫助小弟更快的成長。好了正文從這開始 如何實現在移動裝置下1畫素的邊...

實現移動端1px邊框

最近學了一下vue的實戰課程,學習到了其中的乙個頁面設計技巧,覺得深有感觸,於是便寫個部落格記錄下來,以便下次查閱 專案中是通過vue stylus來實現的,那麼首先需要說一下實現原理,因為在移動端中物理畫素是裝置畫素的兩倍,那麼以平時在pc端中設計的1px 在移動端裝置中就是2px了,那麼,我們要...

移動端1px邊框實現

手機端實現真正的一畫素邊框 border 1px,border bottom 1px,border top 1px,border left 1px,border right 1px 線條顏色 黑色 border 1px after,border bottom 1px after,border top...