前言

应该感觉不止一次会被涉及到关于1px的问题，其主要触发的场景就是高分屏上会把1px宽的边框显示成2px，在dpr为3的设备上，显示边框为3px.

为了避免大家少走弯路，这里简单带一下网上提到的几种方案，包括下面的:

  • 边框的图片，border-image
  • 背景图片
  • 边框的阴影
  • 设置viewport的meta属性(不建议使用)

推荐方案：

1 transform

针对边框设置1px之后，在使用transform,需要结合JavaScript代码，用来判断是否是Retina.

  1. .hairlines li{ position: relative; border:none; } 
  2. .hairlines li:after{ 
  3. content: '';  
  4. position: absolute; left: 0; 
  5. background: #000; width: 100%; height: 1px;
  6.  transform: scaleY(0.5); transform-origin: 0 0; }

2 PostCSS的postcss-write-svg

使用PostCSS的插件是不是比我们修改图片要来得简单与方便。
使用PostCSS的postcss-write-svg插件，最后编译完会变成一背景图片样式。比如：

  1. @svg square { 
  2. @rect { fill: var(--color, black); width: 100%; height: 100%; } } 
  3. #example {
  4.  background: white svg(square param(--color #00b1ff)); }

3 0.5px

查看是否兼容设置0.5px的方案，进行兼容性测试，支持就设置这个样式，结合Flexible方案。

  1. if (dpr >= 2) {
  2.     var fakeBody = document.createElement('body')
  3.     var testElement = document.createElement('div')
  4.     testElement.style.border = '.5px solid transparent'
  5.     fakeBody.appendChild(testElement)
  6.     docEl.appendChild(fakeBody)
  7.     if (testElement.offsetHeight === 1) {
  8.       docEl.classList.add('hairlines')
  9.     }
  10.     docEl.removeChild(fakeBody)
  11.   }

4 伪元素 transform、border-image

京东的1px的方案，边框均是伪元素实现的，但不是所有的样式有实现。

  1. // transform 方案
  2. @media only screen and (-webkit-min-device-pixel-ratio: 2){
  3.  .option:after {
  4.     -webkit-transform: scale(.5);
  5.     -webkit-transform-origin: 0 0;
  6.     bottom: -100%;
  7.     right: -100%;
  8. }
  9. }
  10. option:after {
  11.    content: "";
  12.     display: block;
  13.     border: 1px solid #ddd;
  14.     position: absolute;
  15.     top: 0;
  16.     bottom: 0;
  17.     left: 0;
  18.     right: 0;
  19.     pointer-events: none;
  20. }
  21. // border-image方案
  22. .jd-header-bar {
  23.     position: relative;
  24.     border-width: 0 0 1px;
  25.     border-bottom: 1px solid #bfbfbf;
  26.     -webkit-border-image: url("data:image/gif;base64,R) repeat-x 0 0;
  27.     background-size: 100% 44px
  28. }

5 box-shadow

天锚的方案：box-shadow

  1. .templates-item-wrapper {
  2.     width: 92%;
  3.     margin: 0 auto;
  4.     /* -webkit-box-shadow: 0 1px 2px 0 rgba(157,157,157,.5); */
  5.     -moz-box-shadow: 0 1px 2px 0 rgba(157,157,157,.5);
  6.     /* box-shadow: 0 1px 2px 0 rgba(157,157,157,.5); */
  7. }

参考链接：