微博手机网页端是如何实现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);