欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

移动端出现1px问题的解决办法

程序员文章站 2023-03-26 22:32:15
1》原因 由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍,1px的边框在devicepixelratio=2的移动显示屏下会显示成2px,所以在...

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;
}

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

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