在移动端中,不同的显示器物理设备像素比不一样,可能导致的结果就是当统一设置border:1px solid #ccc;的时候,物理设备像素比为2的手机就会显示为2px的border 。
我们先撇开怎么解决这种问题不说,先了解一下什么是设备物理像素比,它的定义是这样的
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是:window.devicePixelRatio = 物理像素 / dips
更多详情请查看张鑫旭老师的一篇文章《设备像素比devicePixelRatio简单介绍》链接http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/
上板栗:
结构很简单
<div class="main"></div>
然后我们定义样式
.main{ width:200px; height:30px; background:#ccc; position:relative; }
然后我们用after伪元素的方式来给该容器添加一个下边框
.main:after{ position:absolute; left:0; bottom:0; content:""; width:100%; border-top:1px solid red; }
然后我们用媒体查询的方式来实现统一样式
/*当物理设备像素比为1.5时*/ @media (-webkit-min-device-pixel-radio:1.5),(min-device-pixel-radio:1.5) { .main:after{ -webkit-transform:scaleY(0.7) transform:scaleY(0.7) } /*1.5乘以0.7接近于1px*/ } /*当物理设备像素比为2时*/ @media (-webkit-min-device-pixel-radio:2),(min-device-pixel-radio:2) { .main:after{ -webkit-transform:scaleY(0.5) transform:scaleY(0.5) } /*2乘以0.5等于1px*/ }
同理,如果我们需要为该容器设置上边框,我们可以用before伪元素添加
.main:before{ position:absolute; left:0; top:0; content:''; width:100%; border-bottom:1px solid red; }
然后我们用媒体查询的方式来实现统一样式
/*当物理设备像素比为1.5时*/ @media (-webkit-min-device-pixel-radio:1.5),(min-device-pixel-radio:1.5) { .main:before{ -webkit-transform:scaleY(0.7) transform:scaleY(0.7) } /*1.5乘以0.7接近于1px*/ } /*当物理设备像素比为2时*/ @media (-webkit-min-device-pixel-radio:2),(min-device-pixel-radio:2) { .main:before{ -webkit-transform:scaleY(0.5) transform:scaleY(0.5) } /*2乘以0.5等于1px*/ }
我们也可以用css预处理器stylus实现,
新建一个mixin.styl文件
border-1px($color) position:relative &:after display:block position:absolute left:0 bottom:0 width:100% border-top:1px solid $color content:'' @media (-webkit-min-device-pixel-radio:1.5),(min-device-pixel-ratio:1.5) .main &::after -webkit-transform:scaleY(0.7) transform:scaleY(0.7) @media (-webkit-min-device-pixel-radio:2),(min-device-pixel-ratio:2) .main &::after -webkit-transform:scaleY(0.5) transform:scaleY(0.5)
调用该mixin
.main border-1px(red)
(完)