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

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

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

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

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一些基本概念 viewport 视窗 在桌面浏览器中,viewport就是浏览器窗口的宽度高度。但在移动端设备上,...
    Cruyun阅读 1,681评论 0 2
  • (转自:http://blog.csdn.net/tengdazhang770960436/article/det...
    一个废人阅读 802评论 0 1
  • 提问:有使用过Growing IO的小伙伴吗?或者大家用的其他的什么第三方的数据系统?今天他们的销售过来做了一下演...
    纯银V阅读 19,653评论 6 66
  • 生活其实很简单,可以简单地理解为:生存下去的过程。生活不是捆绑,也不是飘浮于云端的修行,它是一个俗人在俗世的经历。...
    格小主阅读 645评论 0 0
  • 这一刻,我竟然不知自己身在何处。 看情景,似乎是在八、九月份下午三、四点钟的时候,太阳相当的强烈,晒得人有些心虚。...
    福二姨阅读 547评论 3 3

友情链接更多精彩内容