饿了么webapp之1px边框
来源:互联网 发布:linux拷贝当前目录 编辑:程序博客网 时间:2024/05/18 17:58
效果图:
关于像素和DPR:http://www.cnblogs.com/xiaohuochai/p/5494624.html
DPR = 设备像素 / CSS像素(某一方向上)
因此,如果DPR是2,即使css像素设置为1px,但在移动端设备显示是2px。例如以上tab切换栏的下边框,如何解决呢?
1.先给tab设置下边框的样式
border-1px($color)
position: relative
&::after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid $color
content: ' '
然而,这样设置其实还是一样,
2.给tab再加一个全局样式,在不同的设备当中自由缩放适应
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
&::after
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7)
<div class="tab border-1px">//加上border-1px这个class
//在设备最小尺寸是1.5时,元素在y轴上的缩放是0.7,1.5*0.7=1,就实现了1倍的缩放
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)
//同理
- 饿了么webapp之1px边框
- Webapp中1px边框在retina屏中变粗的问题
- 1px边框表格
- Table 1px边框
- table 1px边框
- 饿了么webapp之数据二级访问
- 饿了么webapp之header的背景
- 饿了么webapp之css footer的实现
- vue饿了么webapp之vue.set用法
- 制作1px表格边框
- 移动端 1px边框
- 如何实现1px边框
- 如何实现1px边框
- 解决css边框1px
- table里的th和td加了边框后,他是两个边框重合的,1PX就变成了2PX
- vue2.0仿饿了么webapp
- css设置了border-width:1px,却没有边框,原来是这么回事
- 饿了么webapp之块级盒子垂直相邻margin重叠
- 算法第六周Remove Element[easy]
- Word Embedding Topic Discussing
- Java static(二)
- 解决WIN10系统下PL2303_USB转串口驱动兼容性问题
- JavaScript中的内置对象
- 饿了么webapp之1px边框
- Struts2两大验证
- 微信公众号开发--微信JS-SDK扫一扫功能 《二jsp》
- ORA-12514:TNS:listener does not currrntly... PL/SQL连接 win7 VMware上的oracle数据库出错
- GDB
- mysql5.6多实例配置
- 中英文 转 十六进制
- 38. Count and Say解题思路
- Serializable接口的作用性质