解決移動端1px Border

weixin_34357887發表於2018-03-03

今天聊聊解決移動端1px border的問題，當我們進行移動端開發需要實現1px的border是，可能會寫下如下程式碼：

border-bottom:1px solid black;
複製程式碼

寫完一看，border實現，但仔細看會發現，這怎麼成了2px，what happened？ 其實，這時移動裝置的DPR導致的

何為DPR

DPR，Device-Pixel-Retio，裝置畫素比，就是裝置物理畫素與視覺畫素的比值，比如一臺手機裝置物理畫素為2560px，瀏覽器寬度是1280px，那麼DRP就是2，可以在控制檯列印window.devicePixelRatio檢視，移動端DPR=2，所以實際是2px的border，這裡提供兩種解決方法

viewport

head標籤加上一行程式碼

<meta name='viewport' content='width=device-width,initial-scale=0.5'>
複製程式碼

通過手動設定頁面縮放比例為0.5,2px的border就會自動變成1px，該方案十分方便，一行程式碼即可解決麻煩，缺點是對老專案來說需要大量修改已有佈局的尺寸

偽元素+transform

原理是利用:before or :after來重做border,通過transform實現縮放

 .content{
     positon:relative;
     border:none;
 }
 .content:after{
     content:'';
     position:absolute;
     width:100%;
     height:1px;
     bottom:0;
     background:black;
     transform:scaleY(0.5);
 }
複製程式碼

相關文章