Due to different phones have different pixel densities caused. If you move the screen resolution is always 2 times the normal screen, 1px border in devicePixelRatio = 2px next move will be displayed as 2 display, so watching in HD bottle 1px always feel fatter
Xiao Bian read other authors of the article write 0.5px wording, in theory, the smallest unit is 1px . So some equipment write 0.5px invalid (there will be no border situation) is.
How to use the correct 1px 1px unit can display it on your mobile device?
This article describes the use of CSS3 transform property of scale value to solve this problem, which is the most common solution. Source described below 1px (Line / Border) Solutions
Effect of contrast ( Picture effect a little problem, copy the source code below to see the final results )
 |
 |
Source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="author" content="[email protected]">
<title>移动端 1px(线条/边框) 解决方案</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
font-size: 14px;
color: #333;
font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
}
/* 线条 */
.list{
margin: 0 20px;
list-style: none;
line-height: 42px;
padding: 0;
}
.list>li{
padding: 0;
position: relative;
}
.list>li:not(:first-child):after{ /* CSS匹配非第一个直接子元素 */
content: "";
display: block;
height: 0;
border-top: #999 solid 1px;
width: 100%;
position: absolute;
top: 0;
right: 0;
transform: scaleY(0.5); /* 将 1px 的线条缩小为原来的 50% */
}
/* 边框 */
/*
其他作者可能会通过设置4个边的线条凑出边框线的效果，
这样做不仅代码不够精简，而且调整圆角问题也会非常麻烦
*/
.button{
line-height: 42px;
text-align: center;
margin: 20px;
background-color: #f8f8f8;
position: relative;
border-radius: 4px;
}
.button:after{
content: "";
position: absolute;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
border: 1px solid #999;
transform: scale(0.5);
transform-origin: 50% 50% 0;
box-sizing: border-box;
border-radius: 8px; /* 尺寸缩小 50%，即圆角半径设置为按钮的2倍 */
}
</style>
</head>
<body>
<ul class="list">
<li>线条 1px</li>
<li>web前端 河浪</li>
<li>[email protected]</li>
</ul>
<div class="button">边框 1px</div>
</body>
</html>Author: Yellow Avlight QQ: 1846492969, E-mail: [email protected]
No public:
web-7258paper original, copyright reserved by the authors, please indicate the original link and source.More exciting articles, please scan the next Fanger Wei code public concern my number
