本文主要介紹幾種?移動端視網(wǎng)膜（Retina）屏幕下1px邊框線的解決方法。

1、通過viewport + REM的方式來兼容。

目前這種兼容方案相對比較完美，適合新項目（老項目改用REM單位成本會比較高）。 淘寶M首頁 就是這種方案。

在devicePixelRatio = 2 時，輸出viewport

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio = 3 時，輸出viewport

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

同時通過設(shè)置對應viewport的rem基準值，這種方式就可以像以前一樣輕松愉快的寫1px了。關(guān)于REM布局，可以參考下我一篇文章 《移動端H5頁面之iphone6的適配》

其他方案（該部分內(nèi)容來源于妙凈同學的分享）：

2、 transform: scale(0.5)

實現(xiàn)方式

height:1px;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;

優(yōu)點

圓角無法實現(xiàn)，hack代碼多，實現(xiàn)4條邊框比較鬧心

缺點

只能單獨使用，如果嵌套，scale的作用也會對包含的元素產(chǎn)生，不想要的影響，所以此種方案配合:after和:before獨立使用較多，比如畫一個商品的邊框四條線，容器的after和before可以畫2條線，利用容器的父元素的after、before再畫2條線。

.after-scale{
  position: relative;
}
.after-scale:after{
  content:"";
  position: absolute;
  bottom:0px;
  left:0px;
  right:0px;
  border-bottom:1px solid #c8c7cc;
  -webkit-transform:scaleY(.5);
  -webkit-transform-origin:0 0;
}

3、 box-shadow

實現(xiàn)方式

利用css 對陰影處理的方式實現(xiàn)0.5px的效果

底部一條線

-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

優(yōu)點基本所有場景都能滿足，包含圓角的button，單條，多條線，

缺點

顏色不好處理， 黑色 rgba(0,0,0,1) 最濃的情況了。有陰影出現(xiàn)，不好用。

參考鏈接

4、 background-image

實現(xiàn)方式

設(shè)置1px通過css 實現(xiàn)的image，50%有顏色，50%透明

.border {
  background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
  linear-gradient(270deg, red, red 50%, transparent 50%),
  linear-gradient(0deg, red, red 50%, transparent 50%),
  linear-gradient(90deg, red, red 50%, transparent 50%);
  background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
  background-repeat: no-repeat;
  background-position: top, right top,  bottom, left top;
  padding: 10px;
    }

優(yōu)點

配合background-image,background-size,background-position 可以實現(xiàn)單條，多條邊框。邊框的顏色隨意設(shè)置

缺點

如果有圓角的效果，很sorry 圓角的地方?jīng)]有線框的顏色。都要寫的代碼也不少

參考鏈接

5、 用圖片

實現(xiàn)方式

.border-image{
    border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5JREFUeNpiPnH8zH/G////MzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==") 2 0 stretch;
border-width: 0px 0px 1px;
}

優(yōu)點

無

缺點

也可以通過修改圖片來達到圓角的效果，但是由于圖片的原因，壓縮過后的圖片邊緣變模糊了（不放大的情況下不明顯），需要引用圖片或者base64，邊框顏色修改起來不方便。

參考： http://dieulot.net/css-retina-hairline

參考：http://www.ghugo.com/css-retina-hairline/

總結(jié)

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

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