首页 > 代码库 > 1px渲染成2px的场景及解决方案

1px渲染成2px的场景及解决方案

2024-09-16 13:55:55   219人阅读

1、场景一：

IE6 下默认div最小高度为2px，如何创建高为1px的容器？

.minContainer{font-size:0px;overflow:hidden}
 

2、场景二：

移动端高分辨率下，将1px border 渲染成2px

解决方案（1）
<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=no"/>
然后通过rem进行布局
解决方案（2）
利用伪元素scale, 模拟边框：
eg:

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

      .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<br/>sdfdsfsdfds</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>
解决方案（3）
.shadow{box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);}
box-shadow andriod会出现一些异常显示
解决方案（4）
渐变
.border{position:relative;top:40px;height:1px;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; margin-top:20px}
解决方案（5）
 ios7以上版本支持0.5px,可通过js判断是否支持0.5px做降级处理

 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);
}
解决方案（6）

background-image linear-gradient

.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;
     }
解决方案（7）

border-image

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

iphone6 plus渲染成3px 通过@media 进行相应设置

1px渲染成2px的场景及解决方案


联系
我们