【笔记】css 1像素边框

最新推荐文章于 2024-03-11 08:15:00 发布

weixin_30532837

最新推荐文章于 2024-03-11 08:15:00 发布

阅读量183

点赞数

CC 4.0 BY-SA版权

文章标签： php

原文链接：http://www.cnblogs.com/stitchgogo/p/7298550.html

本文介绍了一种用于解决移动端1像素边框显示问题的CSS解决方案，通过使用伪元素和媒体查询实现根据不同设备像素比调整边框尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候在移动端显示1像素的边框时可能因为dpi 的原因造成像素有变差所以为了达到显示的像素达到预期效果就要编写一个css 通用类达到1像素边框的效果

关于dpi 的解释请看张鑫旭老师的文章： http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

下面是代码部分

.border-1px{
      position: relative;
    }
    .border-1px::after{
      content: " ";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      border-bottom: 1px solid #ccc;
    }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5){
      .border-1px{
        -webkit-transform: scaleY(0.7);
        transform: scaleY(0.7);
      }
    }
    /* 当在手机屏幕显示的时候 缩放0.5 即原来大小的一半 */
    @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2){
      .border-1px{
        -webkit-transform: scaleY(0.5); 
        transform: scaleY(0.5);
      }
    }

<div id="father" class="border-1px">我是父元素</div>

归根究底，这个1px 边框就是利用 after（或者before）这个伪类利用元素的位置关系进行排列的

最合核心的部分是媒体查询，根据属性 min-device-pixel-ratio 使伪类元素根据屏幕做缩放

转载于:https://www.cnblogs.com/stitchgogo/p/7298550.html