美文网首页
移动端遇到1px的问题的解决

移动端遇到1px的问题的解决

作者: Keely | 来源:发表于2017-07-28 20:33 被阅读0次
参考:http://www.jianshu.com/p/7e63f5a32636
  • less写的
.border-1px(@color){
    position: relative;
    &:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid @color;
        -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;
    }
}

.inpWrap{
     /*border: 1px solid #c8c8c8;*/
     .border-1px( #c8c8c8); /*使用*/
     width: 500px;
     height: 80px;
     margin: 0 auto 18px;
}
  • 使用前效果: 边框粗细不一样
1px_使用前.jpg
  • 使用后效果:


    1px_使用后.jpg

相关文章

网友评论

      本文标题:移动端遇到1px的问题的解决

      本文链接:https://www.haomeiwen.com/subject/bbiflxtx.html