問題描述
設計最近找我說，文字的邊框很粗，和設計稿不匹配，當時由於專案緊，沒有特別注意這個細節，現在讓我在這個版本迭代修改了。
原因
首先我麼要先找到原因，因為css中的1px不等於移動裝置的1px，由於不同的手機有不同的畫素密度。在window物件中有一個devicePixelRatio屬性，他可以反應css中的畫素與裝置的畫素比。
devicePixelRatio的官方的定義為：裝置物理畫素和裝置獨立畫素的比例。
也就是 devicePixelRatio = 物理畫素 / 獨立畫素。
解決辦法
我採用的解決辦法是利用偽類元素+定位的方式代替直接寫1px。
程式碼如下：

原來的：
border
 
: 1px solid #999;

現在：寬度和高度擴大為原來的兩倍，再利用 transform: scale(0.5);縮放為正常。而border: 1px solid #999999;中的1px就是我們眼中看到的0.5px。
:after{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid #999999;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width
 
: 200%;
      height: 200%;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: left top;
      transform-origin: left top;
      border-radius: 0.25rem;
    }