移动端1个像素边框线sass实现

最新推荐文章于 2022-02-16 14:26:42 发布

wel_coder

最新推荐文章于 2022-02-16 14:26:42 发布

阅读量239

点赞数

分类专栏：移动端开发文章标签： css3

本文链接：https://blog.csdn.net/weixin_42230222/article/details/117698002

版权

本文详细介绍了如何在移动端使用Sass技术来实现精确的1像素边框效果，包括定义像素方法的步骤和实际应用的示例，帮助开发者解决在不同设备上边框显示不一致的问题。

摘要由CSDN通过智能技术生成

1.定义一个像素方法

// _border_1px.scss文件
// 参数说明：
// $pos：边框线位置（上边框线：before；下边框线：after）
// $color：边框颜色
@mixin border_1px($pos:before, $color:#ccc) {
   
    position: relative;
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
   
        &::#{
   $pos} {
   
            content: "";
            position: absolute;