苏秦陶侃博客

移动端问题

字数统计: 171阅读时长: 1 min
2019/02/20 Share

移动端问题

移动端0.5像素问题

0.5像素不能确切显示的原因有以下两点:

  1. 高清屏(Retina) 中控制显示的最小的物理单元包括4个基本的像素点,而普通屏幕1个点像素就是1个物理像素单元。所以在高清屏(Retina)出来之前,就算我们在css中写 0.5px,对于显示屏幕也是不识别的。
  2. 不同浏览器对0.5px支持情况不一样(例如chrome不支持0.5px、Safari支持)

    解决方式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    p {
    position:relative;
    }
    p:after {
    content:' ';
    display: block;
    height:1px;
    width:200%;
    background:'#ccc';
    position:absolute;
    top:100%;
    left:-50%;
    transform:scale(0.5);
    }
CATALOG
  1. 1. 移动端问题
    1. 1.1. 移动端0.5像素问题
      1. 1.1.1. 解决方式