移动端1px细线的处理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >利用transform实现1px的细线</ title > < style type="text/css"> .line{ position: relative; margin-top: 20px; border:none; } .line:after{ content: ''; position: absolute; top: 0; left: 0; border-top: 1px solid red; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: left top; transform-origin: left top; } .line2{ position: relative; margin-top: 40px; border:none; } .line2:after{ content: ''; position: absolute; top: 0; left: 0; border-bottom: 1px solid red; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; -webkit-transform-origin: left top; transform-origin: left top; } </ style > </ head > < body > < div class='line'>1</ div > < div class='line2'>1</ div > < script src='js/rem.js'></ script > < script src="http://127.0.0.1:8082/target/target-script-min.js#anonymous"></ script > </ body > </ html > |
其实是dpi在作怪,现在主流的手机大都是2dpi的,那么一个物理像素会渲染出2px,所以1px的细线就变成了2px,处理方法也很简单。scaleY(0.5)就好。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步