適配移動端的問題以及解決方案

CSS樣式屬性border: 1px;在移動端顯示很粗(超過了1px)

• 解決方案：利用偽類和CSS3的轉換屬性transform中的縮放scale
• 測試用例的html程式碼塊

<div class='test'>
    測試
</div>
複製程式碼

• 測試用例的css樣式

.test {
    width: 200px;
    height: 200px;
    position: relative;
    &:after {
        content: '';
        display: block;
        width: 200%;
        height: 200%;
        border: 1px solid #000;
        transform: scale(.5);
        transform-origin: 0 0;
        position: absolute;
        left: 0;
        top: 0;
      }
}
複製程式碼

未完待續