移动端1px

2018-06-24 00:46:24来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

移动端不同尺寸设备dpi不同,会造成1px线条不同程度的缩放,可利用媒体查询device-pixel-ratio,进行不同情况匹配:

@media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){//dpi:1.5

  .border-1px:after{

    -webkit-transform:scaleY(0.7);

    transform:scaleY(0.7)

  }

}

@media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){//dpi:2

  .border-1px:after{

    -webkit-transform:scaleY(0.5);

    transform:scaleY(0.5)

  }

}

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

下一篇:CSS3与页面布局学习笔记(七)——前端预处理技术(Less、Sass、