码迷,腾讯三分彩 www.csbesbj.com
腾讯三分彩 > 移动开发 > 详细

大赢家彩票平台|www.136057.com:解决CSS移动端1px边框问题

时间:2015-12-25 15:04:00      阅读:3596      评论:0      收藏:0      [点我收藏+]

腾讯三分彩 www.csbesbj.com 标签:

移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下:

一、利用css中的transform的缩放属性解决,推荐这个。如下面代码。

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>解决1px边框问题</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
    <style>
        .line {position:relative;}
        .line:after {width:200%;height:200%;position:absolute;top:0;left:0;z-index:0;content:"";-webkit-transform:scale(0.5);-webkit-transform-origin:0 0;transform:scale(0.5);transform-origin:0 0;box-sizing:border-box;}

        .list {width:100%;margin:auto;list-style:none;padding:0;}
        .list:after {border:1px solid #ccc;border-radius:10px;}
        .item {padding:10px;}
        .item:after {border-bottom:1px solid #ccc;}
        .item:last-child:after {display:none;}
    </style>
</head>
<body>


<ul class="list line">
    <li class="item line">item001</li>
    <li class="item line">item002</li>
    <li class="item line">item003</li>
    <li class="item line">item004</li>
    <li class="item line">item005</li>
    <li class="item line">item006</li>
    <li class="item line">item007</li>
    <li class="item line">item008</li>
    <li class="item line">item009</li>
    <li class="item line">item010</li>
</ul>


</body>
</html>

这个主要利用after伪类进行缩放。调用公共class,还是很方便的。

 

二、JS判断是否支持0.5px边框,是的话,则输出类名hairlines  

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  var testElem = document.createElement(div);
  testElem.style.border = .5px solid transparent;
  document.body.appendChild(testElem);
  if (testElem.offsetHeight == 1)
  {
    document.querySelector(html).classList.add(hairlines);
  }
  document.body.removeChild(testElem);
}

.hairlines .box {}

目前在用这个方法,使用很方便,无须多余的class,可惜支持的不是很好,IOS8+以上才可以。

 

三、box-shadow 阴影

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

最先用的就是这个方法,IOS显示不出。很多安卓机显示就是坨翔,黑乎乎的描边。。

 

四、background-image

.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;
    }

也能实现效果,使用很不方便

 

五、图片

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

显示效果有点模糊,而且万一以后要修改个颜色,那不坑爹了。

 

所以,目前推荐第一种方法。

 

解决CSS移动端1px边框问题

标签:

原文地址:http://www.cnblogs.com/huanlei/p/5075823.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
? 2014 腾讯三分彩 www.csbesbj.com 版权所有 京ICP备13008772号-2
迷上了代码!