由于分辨率 DPI 的差异,高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染,有的屏幕甚至用到了 3×3 个像素点
所以 border: 1px 在移动端会渲染为 2px 的边框
虽然用户在实际使用的时候,很难发现这 1px 的差异,但是设计师往往会在这 1px 上较劲,这就产生了经典的 “一像素问题”
最简单的解决办法,就是用图片做边框,只是修改颜色不太方便。除此之外,还有两种常用的办法
一、transform:scale
使用伪类 :after 或者 :before 创建 1px 的边框,然后通过 media 适配不同的设备像素比,然后调整缩放比例,从而实现一像素边框
{:;:;
}.border-bottom::after {<span style="color: #ff0000;">
content:<span style="color: #0000ff;"> " ";<span style="color: #ff0000;">
position:<span style="color: #0000ff;"> absolute;<span style="color: #ff0000;">
left:<span style="color: #0000ff;"> 0;<span style="color: #ff0000;">
bottom:<span style="color: #0000ff;"> 0;<span style="color: #ff0000;">
width:<span style="color: #0000ff;"> 100%;<span style="color: #ff0000;">
height:<span style="color: #0000ff;"> 1px;<span style="color: #ff0000;">
background-color:<span style="color: #0000ff;"> #e4e4e4;<span style="color: #ff0000;">
-webkit-transform-origin:<span style="color: #0000ff;"> left bottom;<span style="color: #ff0000;">
transform-origin:<span style="color: #0000ff;"> left bottom;
}
content:<span style="color: #0000ff;"> " ";<span style="color: #ff0000;">
position:<span style="color: #0000ff;"> absolute;<span style="color: #ff0000;">
left:<span style="color: #0000ff;"> 0;<span style="color: #ff0000;">
bottom:<span style="color: #0000ff;"> 0;<span style="color: #ff0000;">
width:<span style="color: #0000ff;"> 100%;<span style="color: #ff0000;">
height:<span style="color: #0000ff;"> 1px;<span style="color: #ff0000;">
background-color:<span style="color: #0000ff;"> #e4e4e4;<span style="color: #ff0000;">
-webkit-transform-origin:<span style="color: #0000ff;"> left bottom;<span style="color: #ff0000;">
transform-origin:<span style="color: #0000ff;"> left bottom;
}
{:;:;
}<span style="color: #008000;">/<span style="color: #008000;"> 3倍屏 <span style="color: #008000;">/<span style="color: #800000;">
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {<span style="color: #ff0000;">
.border-bottom:<span style="color: #0000ff;">:after {
-webkit-transform: scaleY(0.33);<span style="color: #ff0000;">
transform:<span style="color: #0000ff;"> scaleY(0.33);
}<span style="color: #800000;">
}
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {<span style="color: #ff0000;">
.border-bottom:<span style="color: #0000ff;">:after {
-webkit-transform: scaleY(0.33);<span style="color: #ff0000;">
transform:<span style="color: #0000ff;"> scaleY(0.33);
}<span style="color: #800000;">
}
这种办法的边框并不是真正的 border,而是高度或者宽度为 1px 的块状模型,所以这种办法不能做出圆角,一般都用来画分割线
二、viewport
网页的内容都渲染在 viewport 上,所以设备像素比的差异,直接影响的也是 viewport 的大小
通过 js 获取到设备像素比,然后动态添加 标签
scale = 1.0 (window.devicePixelRatio === 2*= 0.5 (window.devicePixelRatio === 3*= 0.333333 text = ''
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。