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