移动端问题
移动端0.5像素问题
0.5像素不能确切显示的原因有以下两点:
- 高清屏(Retina) 中控制显示的最小的物理单元包括4个基本的像素点,而普通屏幕1个点像素就是1个物理像素单元。所以在高清屏(Retina)出来之前,就算我们在css中写 0.5px,对于显示屏幕也是不识别的。
- 不同浏览器对0.5px支持情况不一样(例如chrome不支持0.5px、Safari支持)
解决方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14p {
position:relative;
}
p:after {
content:' ';
display: block;
height:1px;
width:200%;
background:'#ccc';
position:absolute;
top:100%;
left:-50%;
transform:scale(0.5);
}