这两天在帮朋友做个移动端的项目,第一次用的新的东西来做,真的是碰到不少坑了。
不过现在要些的是一个小东西,移动端上经常碰到的,真正1px的border。
附:这里有大神的设备像素比devicePixelRatio简单介绍,这里不多写,还得赶东西。
由于设备像素比存在的原因,我们在处理设一些边框时,对于1px的border,如果在代码里将它写死,可能在不同设备像素比的设备中,粗细不一样,尤其是在目前大多数设备像素比为2的设备中,貌似有点粗。那么利用媒体查询和”min-device-pixel-ratio”就可以轻松的搞定,实现真正的的1px border。
不知道简书有没有代码的视图解析,直接贴图好了,代码如下:
比如我这里用的是stylus,然后需要用它的话直接 border-1px(#f60)就可以了