1px解決方案—:before, :after與transform

之前說的frozenUI的圓角邊框就是采用這種方式, 構(gòu)建1個(gè)偽元素, 將它的長寬放大到2倍, 邊框?qū)挾仍O(shè)置為1px, 再以transform縮放到50%.

需要注意<input type="button">是沒有:before, :after偽元素的

優(yōu)點(diǎn): 其實(shí)不止是圓角, 其他的邊框也可以這樣做出來

缺點(diǎn): 代碼量也很大, 占據(jù)了偽元素, 容易引起沖突

.radius-border{position: relative; } @media screen and (-webkit-min-device-pixel-ratio: 2){.radius-border:before{content: "";pointer-events: none; /* 防止點(diǎn)擊觸發(fā) */box-sizing: border-box;position: absolute;width: 200%;height: 200%;left: 0;top: 0;border-radius: 8px;border:1px solid #999;-webkit-transform(scale(0.5));-webkit-transform-origin: 0 0;transform(scale(0.5));transform-origin: 0 0;} }

6. transform: scale(0.5) 方案 - 推薦: 很靈活

? 在以上的用法種，無非逃不開一種思想，就是將1px縮小為0.5px來展示，然而。0.5px并不是所有的設(shè)備或?yàn)g覽器都支持，就考慮用媒體查詢或viewport將其縮放比例。其實(shí)1像素問題的產(chǎn)生基本發(fā)生在設(shè)置邊框或分割線的時(shí)候，場景并不覆蓋全局樣式，因此，直接縮放需要設(shè)置的元素，才是我們真正需要的。tranform就能實(shí)現(xiàn)這個(gè)需求。

設(shè)置height: 1px，根據(jù)媒體查詢結(jié)合transform縮放為相應(yīng)尺寸。

div {height:1px;background:#000; -webkit-transform: scaleY(0.5); -webkit-transform-origin:0 0; overflow: hidden; }

2.用::after和::befor,設(shè)置border-bottom：1px solid #000,然后在縮放-webkit-transform: scaleY(0.5);可以實(shí)現(xiàn)兩根邊線的需求

div::after{content:'';width:100%; border-bottom:1px solid #000; transform: scaleY(0.5); }

3.用::after設(shè)置border：1px solid #000; width:200%; height:200%,然后再縮放scaleY(0.5); 優(yōu)點(diǎn)可以實(shí)現(xiàn)圓角，京東就是這么實(shí)現(xiàn)的，缺點(diǎn)是按鈕添加active比較麻煩。

.div::after {content: ''; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1px solid #bfbfbf; border-radius: 4px; -webkit-transform: scale(0.5,0.5); transform: scale(0.5,0.5); -webkit-transform-origin: top left; }

# 6.5 媒體查詢 + transfrom 對方案1的優(yōu)化

/* 2倍屏 */ @media only screen and (-webkit-min-device-pixel-ratio: 2.0) {.border-bottom::after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } /* 3倍屏 */ @media only screen and (-webkit-min-device-pixel-ratio: 3.0) { .border-bottom::after { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); } }

轉(zhuǎn)載于:https://www.cnblogs.com/duanzhange/p/9294769.html

總結(jié)

以上是生活随笔為你收集整理的移动端1px像素的设置？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。