使用于所有手机的0.5px的border

最新推荐文章于 2022-09-29 09:14:01 发布

fechild

最新推荐文章于 2022-09-29 09:14:01 发布

阅读量823

点赞数

分类专栏： css 文章标签： .5px实现

本文链接：https://blog.csdn.net/cotexarm7/article/details/81942830

版权

css 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1px的线在手机上会影响美感，太粗，这个时候，需要兼容所有手机的0.5px的线。iphone手机支持.5px的设置，字体方面也是支持任何大小的字体。而安卓手机不支持.5px的设置，浏览器会渲染为1px。在字体方面，安卓手机最小支持8px的字体设置，如果设置的再小点，还是显示为8px的大小。（Webkit内核的适用范围较为广泛，Android原生浏览器、苹果的Safari、谷歌的Chrome(Android4.0使用)都是基于Webkit开源内核开发的。）

下面介绍兼容各种浏览器的物理像素为1px的实现方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>物理高度为1px的border</title>
    <meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1"/>
    <style type="text/css">
@media (-webkit-min-device-pixel-ratio: 2) {
    .border,.border-top,.border-right, .border-bottom, .border-left, .border-horizontal {
        position: relative;
        z-index: 1;
        border-width: 0;
    }
    .border:after, .border-top:after, .border-right:after, .border-bottom:after, .border-left:after, .border-horizontal:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        border-radius: 70px;
        transform: scale(.5);
        transform-origin: 0 0;
        pointer-events: none;
    }
    .border:after {
        border: 1px solid #e7e7e7;
    }
    .border-top:after {
        border-top: 1px solid #e7e7e7;
        height: 1px;
    }
    .border-right:after {
        left: auto;
        right: 0;
        width: 1px;
        border-right: 1px solid #e7e7e7;
    }
    .border-bottom:after {
        top: auto;
        bottom: 0;
        height: 1px;
        border-bottom: 1px solid #e7e7e7;
    }
    .border-left:after {
        width: 1px;
        border-left: 1px solid #e7e7e7;
    }
    .border-horizontal:after {
        border-top: 1px solid #e7e7e7;
        border-bottom: 1px solid #e7e7e7;
    }
    .border-vertical:after {
        border-left: 1px solid #e7e7e7;
        border-right: 1px solid #e7e7e7;
    }
}
.test {
    height: 200px;
}
</style>
</head>
<body>
    <div class="border-horizontal test"></div>
</body>
</html>

结果：

fechild

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用于所有手机的0.5px的border

1px的线在手机上会影响美感，太粗，这个时候，需要兼容所有手机的0.5px的线。iphone手机支持.5px的设置，字体方面也是支持任何大小的字体。而安卓手机不支持.5px的设置，浏览器会渲染为1px。在字体方面，安卓手机最小支持8px的字体设置，如果设置的再小点，还是显示为8px的大小。（Webkit内核的适用范围较为广泛，Android原生浏览器、苹果的Safari、谷歌的Chrome(And...
复制链接

扫一扫