当前位置：网站首页>1px問題

1px問題

2022-06-10 02:52:00 【Float544】

物理像素：顯示器上的真實像素，每個像素的大小是屏幕固有的屬性。設備分辨率描述的就是這個顯示器的寬和高是多少個設備像素。例如:1920*1080。
設備獨立像素：操作系統定義的像素單比特。操作系統將設備獨立像素轉化為設備像素，從而控制屏幕上真正的物理像素點。CSS屬於設備獨立像素。

設備像素比 = 物理像素 / 設備獨立像素
dpr = 1 一個物理像素顯示一個設備獨立像素
dpr = 2 四個物理像素顯示一個設備獨立像素

出現移動端1px問題主要是因為設備像素比不為1導致的。在pc上dpr = 1。但在移動設備中基本dpr不為1，這也就導致了在移動端上1px展示的看起來比較粗。

解决方案：
transform + 偽類
dpr = 2 50%
dpr = 3 33.3%

transform:scaleY(0.5)
transform-origin:50% 0;

    <style>
        div{
    
            height: 150px;
            width: 150px;
            background-color: pink;
            margin: auto;
        }
        div:after{
    
            content: '';
            display: block;
            width: 100%;
            background-color: black;
            height: 10px;
            transform: scaleY(0.5);
            transform-origin:50% 0;
        }
    </style>
</head>
<body>
    <div></div>
</body>

第二種方法:

box-shadow

原网站

版权声明
本文为[Float544]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/161/202206100251140144.html

边栏推荐

猜你喜欢

随机推荐