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

之前說的frozenUI的圓角邊框就是采用這種方式, 構建1個偽元素, 將它的長寬放大到2倍, 邊框寬度設置為1px, 再以transform縮放到50%.

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

優點: 其實不止是圓角, 其他的邊框也可以這樣做出來

缺點: 代碼量也很大, 占據了偽元素, 容易引起沖突

.radius-border{position: relative; } @media screen and (-webkit-min-device-pixel-ratio: 2){.radius-border:before{content: "";pointer-events: none; /* 防止點擊觸發 */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并不是所有的設備或瀏覽器都支持，就考慮用媒體查詢或viewport將其縮放比例。其實1像素問題的產生基本發生在設置邊框或分割線的時候，場景并不覆蓋全局樣式，因此，直接縮放需要設置的元素，才是我們真正需要的。tranform就能實現這個需求。

設置height: 1px，根據媒體查詢結合transform縮放為相應尺寸。

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

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

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

3.用::after設置border：1px solid #000; width:200%; height:200%,然后再縮放scaleY(0.5); 優點可以實現圓角，京東就是這么實現的，缺點是按鈕添加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的優化

/* 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); } }

轉載于:https://www.cnblogs.com/duanzhange/p/9294769.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。