首页 > 微博手机网页端是如何实现1px边框的

微博手机网页端是如何实现1px边框的

微博手机网页端是如何实现1px边框的?

正常写手机版网页1px在高分屏上通常都不止1个像素
但是打开微博网页版,消息、我,这两页边框都是真正的1个像素,请问如何实现的。


设置一个伪元素,宽高200%,设置他的边框为1px,然后用css3缩小一倍,能同时把border缩小为0.5px,其他单边边框同理


几种方法实现

https://codepen.io/yangg/pen/...


现在比较流行(靠谱)的方法就是用伪元素画线,然后transform:scale(0.5)
你可以参照下微信的那套weui,里面所有的border都是这么写的
微信官方都这么写了,应该是没问题了


可以直接用背景图的形式,不设置border


你可以看我那天提问的问题,我最后的解决方案是这样的,判断手机修改viewport,在车上,没代码,你可以参考链家手机版,查看头部那串meta的js。

http://jinlong.github.io/2015...


使用 transform 的 scale

border-bottom: 1px solid #D5D5D6
transform:scaleY(0.5);
【热门文章】
【热门文章】