手機頁面中如何建立1px寬度的間隔線

這個問題自我從一開始編寫頁面的時候就困擾着，一直沒找到解決方法。

1px是每個顯示器能顯示的最小機關，但由于在手機上顯示的時候，需要添加 ​​

​meta viewport​

​ 相關屬性，導緻頁面最小機關不再是1px，大約在2px左右。

前些天在看微信css的時候，發現他們已經可以做出這種效果了。

研究了下，方法如下。

span{
    position: relative; //因為::after内需要absolute
    &::after{
      position: absolute;
      bottom: 0;
      left: 55px;
      right: 0;
      content: '';
      border-bottom: 1px solid #cccccc;
      background-color: #cccccc;
      transform-origin: 0 100%;  //最重要的是這兩個
      transform: scaleY(.5);     //最重要的是這兩個，設定縱向縮放50%
    }
  }      

示範效果如下（看不清的右擊在新視窗中打開圖檔）：

之前是這樣的（非1px）

之後是這樣的（1px），會有種很精緻的感覺