解决这个问题之前首先要了解移动前端开发viewport的概念,自己写了一篇很粗糙viewport详解的文章对它有了一个很简单的理解.这里推荐一篇很详细的博文<<移动前端开发之viewport的深入理解>>
步入正题直接上代码解决border：1px的解决办法
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>
2种方案都是CSS3来解决的.第一种是通过元素进行缩放;第二种是线性渐变的方法,此方法只能在手机上才能看到效果.
时间： 2024-07-31 19:40:42