用min-device-pixel-ratio媒体功能实现真正的1像素border

这两天在帮朋友做个移动端的项目,第一次用的新的东西来做,真的是碰到不少坑了。

不过现在要些的是一个小东西,移动端上经常碰到的,真正1px的border。

附:这里有大神的设备像素比devicePixelRatio简单介绍,这里不多写,还得赶东西。

由于设备像素比存在的原因,我们在处理设一些边框时,对于1px的border,如果在代码里将它写死,可能在不同设备像素比的设备中,粗细不一样,尤其是在目前大多数设备像素比为2的设备中,貌似有点粗。那么利用媒体查询和”min-device-pixel-ratio”就可以轻松的搞定,实现真正的的1px border。

不知道有没有代码的视图解析,直接贴图好了,代码如下:

比如我这里用的是stylus,然后需要用它的话直接 border-1px(#f60)就可以了

用min-device-pixel-ratio媒体功能实现真正的1像素border_第1张图片
用min-device-pixel-ratio媒体功能实现真正的1像素border_第2张图片

你可能感兴趣的:(用min-device-pixel-ratio媒体功能实现真正的1像素border)