移动端1px适配问题

Retina屏幕，设备像素比，移动端的边框在这些屏幕上1px  会表现处2px,3px像素的宽度，所以出现各种解决方案，今天只总结一种，以后慢慢补充。。通过伪类 ::after。，原理就是通过transfrom:scaleX scale scaleY这几个函数进行缩放，废话不多说，直接撸代码，分别是：底边，上边，左边，右边，还有四个边框都有，在文章末尾有相关知识的介绍链接，本文就不会浪费文字在这些方面了。

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>移动端1px</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        div {
            text-align: center;
            margin: 0 auto;
        }
        
        p {
            text-align: center;
        }
        
        .border-bottom-1px,
        .border-top-1px,
        .border-left-1px,
        .border-right-1px {
            width: 50px;
            height: 50px;
        }
        /*移动端1px解决方案*/
        
        .border-1px,
        .border-bottom-1px,
        .border-top-1px,
        .border-left-1px,
        .border-right-1px {
            width: 100px;
            height: 100px;
            position: relative;
        }
        /*线条颜色 黑色*/
        
        .border-bottom-1px::after,
        .border-top-1px::after,
        .border-left-1px::after,
        .border-right-1px::after {
            background-color: #000;
        }
        /*底边边框一像素*/
        
        .border-bottom-1px::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            transform-origin: 0 0;
        }
        /*上边边框一像素*/
        
        .border-top-1px::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            transform-origin: 0 0;
        }
        /*左边边框一像素*/
        
        .border-left-1px::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 1px;
            height: 100%;
            transform-origin: 0 0;
        }
        /*右边边框1像素*/
        
        .border-right-1px::after {
            content: "";
            box-sizing: border-box;
            position: absolute;
            right: 0;
            top: 0;
            width: 1px;
            height: 100%;
            transform-origin: 0 0;
        }
        /*边框一像素*/
        
        .border-1px::after {
            content: "";
            box-sizing: border-box;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border: 1px solid red;
        }
        /*设备像素比*/
        
        @media only screen and (-webkit-min-device-pixel-ratio: 2.0),
        only screen and (min-resolution: 2dppx) {
            .border-bottom-1px::after,
            .border-top-1px::after {
                transform: scaleY(0.5);
            }
            .border-left-1px::after,
            .border-right-1px::after {
                transform: scaleX(0.5);
            }
            .border-1px::after {
                width: 200%;
                height: 200%;
                transform: scale(0.5);
                transform-origin: 0 0;
            }
        }
        /*设备像素比*/
        
        @media only screen and (-webkit-min-device-pixel-ratio: 3.0),
        only screen and (min-resolution: 3dppx) {
            .border-bottom-1px::after,
            .border-top-1px::after {
                transform: scaleY(0.333);
            }
            .border-left-1px::after,
            .border-right-1px::after {
                transform: scaleX(0.333);
            }
            .border-1px::after {
                width: 300%;
                height: 300%;
                transform: scale(0.333);
                transform-origin: 0 0;
            }
        }
    </style>
</head>

<body>
    <p>1, 1px border</p>
    <div class="border-1px"></div>
    <p>2, 1px left border</p>
    <div class="border-left-1px"></div>
    <p>3, 1px top border</p>
    <div class="border-top-1px"></div>
    <p>4, 1px right border</p>
    <div class="border-right-1px"></div>
    <p>5, 1px bottom border</p>
    <div class="border-bottom-1px"></div>
</body>

</html>

如果好奇设备像素比，可以去看张鑫旭老师的博客：设备像素比devicePixelRatio简单介绍

如果好奇其它的解决方案，可以去看另外博客的文章：移动端1px解决方案

　　

posted @ 2017-09-19 16:00  清风丶徐来  阅读(233)  评论(0)    收藏  举报