移动端之1px实现

最新推荐文章于 2024-07-05 17:35:21 发布

方小圆

最新推荐文章于 2024-07-05 17:35:21 发布

阅读量370

点赞数

本文链接：https://blog.csdn.net/fengfangyuan/article/details/92759348

版权

说明

当我们在css里写 border: 1px solid #000的时候，用户会觉得边线依然很粗不美观。如何实现比1px更细的边线呢？下面列举了几种方案。

问题根源

不同设备的物理像素不一样。设计师一般是按照750px宽度设计页面的，而移动端做自适应时，一般会设置width = device-width，假如设备物理像素为375px，那么布局宽度应该为375px，按比例，此时设计师的1px在页面上应该显示为0.5px。

代码演示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>1px</title>
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <div class="item item-1px">列表1</div>
  <div class="item item-0_5px">列表2</div>
  <div class="item item-css3transform">列表3</div>
  <div class="item item-background">列表5</div>
  <div class="item item-4-border">列表6</div>


  <style>

    .item {
      padding: 10px 0
    }
	
	/*直接写1px，在不同屏幕上效果不一样，有些比设计图粗，有些比设计图细*/
    .item-1px { 
      border-bottom: 1px solid #ccc;
    }

	/*直接写小数点，ios有效 android无效*/
    .item-0_5px {
      border-bottom: .5px solid #ccc;
    }
	
	/*用伪类+css3缩放，缺点就是最多只能写两个伪类(before和after)，当有四条边框时，无法实现*/
    .item-css3transform::after {
      content: '';
      display: block;
      height: 1px;
      transform: scaleY(0.5);
      background: #ccc;
      position: relative;
      top: 10px;
    }
	
	/*使用背景线性渐变*/
    .item-background::after {
      display: block;
      content: '';
      height: 1px;
      background: linear-gradient(0deg, #ccc 50%, transparent 50%);
      position: relative;
      top: 10px;
    }
	/*使用背景线性渐变，当边框有border-radius时，效果不好*/
    .item-4-border {
      margin: 10px 0;
      padding: 10px;
      background: linear-gradient(to bottom, #ccc .5px, transparent 0), linear-gradient(to left, #ccc .5px, transparent 0), linear-gradient(to right, #ccc .5px, transparent 0), linear-gradient(to top, #ccc .5px, transparent 0);
    }


  </style>
</body>
</html>

方案总结

方案1， viewport缩放
前面讲过viewport适配的方案，适配的原理是整个页面放大缩小，当然也包括边线

方案2，设置0.5px
ios有效，部分安卓机型无效。慢慢等吧，总有一天（可能一两年后）安卓会生效

方案3，使用CSS3 transform，给伪元素缩小尺寸
都有效，缺点是一条边框还好，如果是4条边框两个伪元素不够得新增标签

方案4，使用背景线性渐变
方便，兼容性好。

其他方案
背景图片（麻烦、兼容性不好），svg背景图片（麻烦）

方小圆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端之1px实现

说明当我们在css里写 border: 1px solid #000的时候，用户会觉得边线依然很粗不美观。如何实现比1px更细的边线呢？下面列举了几种方案。问题根源不同设备的物理像素不一样。设计师一般是按照750px宽度设计页面的，而移动端做自适应时，一般会设置width = device-width，假如设备物理像素为375px，那么布局宽度应该为375px，按比例，此时设计师的1px在...
复制链接

扫一扫