移動端開發1px邊框問題

.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...