css：移动端一像素边框的实现

最新推荐文章于 2022-12-15 19:02:57 发布

Mosowe

最新推荐文章于 2022-12-15 19:02:57 发布

阅读量311

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/skyblacktoday/article/details/113879106

版权

移动端适配 1px边框 vh/vw单位 CSS伪元素 transform缩放

关键词由CSDN通过智能技术生成

css 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

尽管我移动端采用的是vh/vw来适配所有的手机（基本没用css媒体查询），但是针对1px的边框（项目中所有小于等于1px的都不会转换成vh/vw），在移动端还是显得很粗（写到这里还没试过将1px转成vh/vw的情况，-_-||）。

本方法采用的是（老生常谈，网上一大堆-_-||）伪类实现：

            .notOrder{
              font-size: 20px;
              color: #F42B3F;
              display: inline-block;
              width: 72px;
              height: 28px;
              text-align: center;
              line-height: 0px;
              padding: 14px 0;
              box-sizing: border-box;
              &::after{ /*after实现边框*/
                display: block;
                content: ' ';
                width: 200%;/*宽高放大一倍*/
                height: 200%;
                position: absolute;
                left: 0;
                top: 0;
                transform: scale(0.5) translateX(-50%) translateY(-50%);/*scale将其缩小与父元素一样的长宽*/
                border:1px solid #FF9CAA;
                border-radius: 8px;
              }
            }