移動端下網頁border：1px顯示

時間 2019-12-08

標籤移動網頁 border 1px 顯示欄目無線简体版

原文原文鏈接

解決這個問題以前首先要了解移動前端開發viewport的概念,本身寫了一篇很粗糙viewport詳解的文章對它有了一個很簡單的理解.這裏推薦一篇很詳細的博文<<移動前端開發之viewport的深刻理解>>css

步入正題直接上代碼解決border：1px的解決辦法html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 6     <title>像素爲1px</title>
 7     <style type="text/css">
 8         .border{ position: relative; margin-bottom: 20px;}
 9         .border:after{ content: ''; display:block; position: absolute; width: 100%; left: 0px; bottom: 0px;height: 1px; background-color: #ccc; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);}
10 
11         .border2{background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #ccc), to(#ccc)) left bottom repeat-x; background-size: 100% 1px; }
12     </style>
13 </head>
14 <body>
15     <div class="border">像素爲1px解決方法一</div>
16 
17     <div class="border2">像素爲1px解決方法二</div>
18 </body>
19 </html>