适配移动端的问题以及解决方案

223 阅读1分钟

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;
      }
}

未完待续