手机端出现1px问题的处理办法
1》起因
因为不同的手机有不同的像素密度导致的。假如移动显示屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px,所以在高清瓶下看着1px总是感觉变胖了
2》处理方法
一.在ios8+中当devicePixelRatio=2的时候用0.5px
p{
border:1px solid #000;
}
@media (-webkit-min-device-pixel-ratio: 2) {
p{
border:0.5px solid #000;
}
}
二,伪类 + transform 实现
对于老项目伪类+transform是比较完美的方法了。
原理是把原价元素的 border 去掉,而后利使用 :before 或者者 :after 重做 border ,并 transform 的 scale 缩小一半,原价的元素相对定位,新做的 border 绝对定位。
单条border样式设置:
.scale-1px{ position: relative; border:none; }
.scale-1px:after{
content: '';
position: absolute; bottom: 0;
background: #000;
width: 100%; height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0; }
优点:所有场景都能满足,支持圆角(伪类和本体类都需要加border-radius)
缺点:对于已经用伪类的元素(例如clearfix),可能需要多层嵌套
三,viewport + rem 实现
这种兼容方案相比照较完美,适合新的项目,老的项目修改成本过大。
在devicePixelRatio = 2 时,输出viewport:
在devicePixelRatio = 3 时,输出viewport:
优点:所有场景都能满足,一套代码,可以兼容基本所有布局
缺点:老项目修改代价过大,只适使用于新项目
四,用box-shadow模拟边框
利使用css 对阴影解决的方式实现0.5px的效果
样式设置:
.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
优点:代码量少,可以满足所有场景
缺点:边框有阴影,颜色变浅
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 手机端出现1px问题的处理办法