1px 解决方案【CSS 知识汇点5】

发布于 2022年 02月 12日 02:49

在高清屏下，移动端的 web 的1px会很粗，主要是因为 DPR（设备像素比），它是默认缩放为100%的情况下，物理像素/css 像素的比值，目前主流的屏幕 DPR = 2/3。

解决方案

wwdc 对 ios 系统的方案

在 ios 下，可以这样写：border: 0.5px solid #E5E5E5.

优点： 简单、没有副作用

缺点：支持 ios8+，不支持安卓

使用边框图片

border: 1px solid transparent;
border-image: url('./../../image/96.jpg') 2 repeat

优点： 没有副作用

缺点： border 颜色变了就需要重新制作图片；圆角比较模糊

使用 box-shadow 实现

box-shadow 属性用于在元素的框架上添加阴影效果，可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。

// box-shadow: x偏移量 y偏移量 阴影模糊半径 阴影扩散半径 阴影颜色
box-shadow: 0 -1px 1px -1px #e5e5e5, // 上边
			1px 0 1px -1px #e5e5e5， // 右边
            0 1px 1px -1px #e5e5e5,
            -1px 0 1px -1px #e5e5e5

优点：使用简单，圆角也可以实现 缺点：模拟的实现方法，仔细看可以看出来是阴影不是边框

使用伪元素 + transform

// 1条border
.setOnePx {
	position: relative;
    &::after {
    	position: absolute;
        content: '';
        background-color: #e5e5e5;
        display: block;
        width: 100%;
        height: 1px;
        transform: scale(1, 0.5); 在 y 方向缩小 0.5 倍
        top: 0;
        left: 0;
    }
}
// 4条border
.setBroderAll {
	position: relative;
    &::after {
    	position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 200%; // 先放大两倍
        height: 200%;
        transform: scale(0.5)；// 缩放为原来的 0.5 倍
        transform-origin: left top; // 以左上角为中心
        box-sizing: border-box;
        border: 1px solid #e5e5e5;
        border-raduis: 4px;
    }
}

优点：全机型兼容，实现了真正的 1px，而且可以圆角

缺点：暂用了 after 伪元素，可能会影响清除浮动

设置 viewport 的 scale 值

也就是使用 rem + vw + js 实现的: 参考链接

<html>
  <head>
      <title>1px question</title>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">        
      <style>
          html {
              font-size: 1px;
          }            
          * {
              padding: 0;
              margin: 0;
          }
          .top_b {
              border-bottom: 1px solid #E5E5E5;
          }

          .a,.b {
              box-sizing: border-box;
              margin-top: 1rem;
              padding: 1rem;                
              font-size: 1.4rem;
          }
      </style>
      <script>
          var viewport = document.querySelector("meta[name=viewport]");
          //下面是根据设备像素设置viewport
          if (window.devicePixelRatio == 1) {
              viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');
          }
          if (window.devicePixelRatio == 2) {
              viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');
          }
          if (window.devicePixelRatio == 3) {
              viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');
          }
          var docEl = document.documentElement;
          var fontsize = 32* (docEl.clientWidth / 750) + 'px';
          docEl.style.fontSize = fontsize;
      </script>
  </head>
  <body>
      <div class="top_b a">下面的底边宽度是虚拟1像素的</div>
      <div class="b">上面的边框宽度是虚拟1像素的</div>
  </body>
</html>

优点：全机型兼容

缺点：适用于新项目，老项目改造成本过高

推荐文章