如何解决1px问题

为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句

这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放. viewport通俗的讲是浏览器上可用来显示页面的区域, 这个区域是可能比屏幕大的

关于1px问题

1、0.5px边框
在2014年的 WWDC，“设计响应的Web体验” 一讲中，Ted O’Connor 讲到关于“retina
hairlines”（retina 极细的线）：在retina屏上仅仅显示1物理像素的边框，开发者应该如何处理呢。
他们曾介绍到 iOS 8 和 OS X Yosemite 即将支持 0.5px 的边框：问题是 retina 屏的浏览器可能不认识0.5px的边框，将会把它解释成0px，没有边框。包括 iOS 7 和之前版本，OS X Mavericks 及以前版本，还有 Android 设备。

解决方法

解决方案1是通过 JavaScript 检测浏览器能否处理0.5px的边框，如果可以，给html标签元素添加个class。

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


div {
  border: 1px solid #bbb;
}
.hairlines div {
  border-width: 0.5px;
}

解决方法2利用css中的transform的缩放属性解决 推荐使用

    
    
    
    





    
item001
    
item002
    
item003
    
item004
    
item005
    
item006
    
item007
    
item008
    
item009
    
item010

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

>解决方案3background-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;
    }

也能实现 但过于麻烦 使用和维护及其不方便