手机端出现1px问题的处理办法

  • 时间:2018-07-25 23:17 作者:IT生涯 来源:IT生涯 阅读:69
  • 扫一扫,手机访问
摘要:1》起因因为不同的手机有不同的像素密度导致的。假如移动显示屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px,所以在高清瓶下看着1px总是感觉变胖了2》处理方法一.在ios8+中当devicePixelRatio=2的时候用0.5pxp{

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;

}

优点:代码量少,可以满足所有场景

缺点:边框有阴影,颜色变浅

  • 全部评论(0)
最新发布的资讯信息
【网页前端|JS】五年Java程序员该掌握的技术点,这些都不懂,还想拿高薪吗?(2019-04-24 22:19)
【系统环境|】2019蚂蚁金服面试总结(Java方向)(2019-04-18 16:19)
【系统环境|】notepad++ 三位数字正则替换规则(2019-04-12 23:02)
【系统环境|服务器应用】网络工程师跨交换机的Vlan配置与管理知识(2019-03-26 02:14)
【系统环境|服务器应用】最小化的定制版linux系统:CoreOS(2019-03-26 02:14)
【系统环境|服务器应用】分布式系统面试题:分布式事务处理方案?(2019-03-26 02:13)
【系统环境|服务器应用】带着网关去旅行(系列二):防止vps上ssh端口被恶意扫描(2019-03-26 02:13)
【系统环境|服务器应用】美团iOS面试总结(2019-03-26 02:13)
【系统环境|服务器应用】百度iOS面试总结(2019-03-26 02:13)
【系统环境|服务器应用】Java大佬之学习历程(三)(2019-03-26 02:13)
手机二维码手机访问领取大礼包
返回顶部