前端常见问题——一像素显示

fsmStudy 发布于2019-08-29 16:28 / 2460人阅读

摘要：关于一像素显示的问题可以参考从像素问题剖析像素及和屏幕揭秘。解决方案如何解决一像素显示问题可以参考博客种方法解决移动端屏幕边框问题。

关于一像素显示的问题可以参考从1px像素问题剖析像素及viewport 和 iPhone 6 屏幕揭秘。

解决方案

如何解决一像素显示问题可以参考博客 7种方法解决移动端Retina屏幕1px边框问题。

方案/优缺点	兼容性	颜色	圆角	总结
0.5px 边框	无法兼容安卓设备、 iOS 8 以下设备	支付	支持	简单，不需要过多代码
使用 border-image	无	修改颜色麻烦，需要替换图片	圆角需要特殊处理，并且边缘会模糊	可以设置单条,多条边框，且没有性能瓶颈的问题
使用background-image实现	无	修改颜色麻烦, 需要替换图片	圆角需要特殊处理，并且边缘会模糊	可以设置单条,多条边框，没有性能瓶颈的问题
多背景渐变实现	多背景图片有兼容性问题	支持	不支持	可以实现单条、多条边框，边框的颜色随意设置，但是代码量不少
使用 box-shadow 模拟边框	无	边框有阴影，颜色变浅	支持	代码里少，可以满足所有场景
viewport + rem 实现	无	支持	支持	所有场景都能满足，一套代码，可以兼容基本所有布局，但是老项目修改代价过大，只适用于新项目
伪类 + transform 实现	无	支持	支持(伪类和本体类都需要加border-radius)	所有场景都能满足，对于已经使用伪类的元素(例如clearfix)，可能需要多层嵌套

测试示例

一像素分割线

一像素分割线（viewport + rem 实现）

一像素边框

一像素边框（viewport + rem 实现）

最佳实践

如果公司内部已经有成熟的 “viewport + rem” 实现方案，那就不需要考虑一像素问题了。对于没有采用该方案的项目，可以结合 ”0.5px 边框“ 和 “伪类 + transform 实现” 的实现方案。

HTML 的 header 标签里加入 0.5 像素检测脚本（放在头部可避免屏幕出现闪烁问题）

var docEl = document.documentElement;
var fakeBody = document.createElement("body");
var testElement = document.createElement("div");
testElement.style.border = ".5px solid transparent";
fakeBody.appendChild(testElement);
docEl.appendChild(fakeBody);
if (testElement.offsetHeight === 1) {
  docEl.classList.add("hairlines");
}
docEl.removeChild(fakeBody);

根据选择器 .hairlines 和设备像素比来设置预定义的公共样式

/* 分割线 */
.line-bottom,
.line-left,
.line-right,
.line-top {
  position: relative;
}
.line-top::before,
.line-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  height: 1px;
  width: 100%;
  background-color: #e8e8e8;
}
.line-left::before,
.line-right::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: #e8e8e8;
}
.line-top::before {
  top: 0;
}
.line-bottom::after {
  bottom: 0;
}
.line-left::before {
  left: 0;
}
.line-right::after {
  right: 0;
}
.hairlines .line-top::before,
.hairlines .line-left::before,
.hairlines .line-right::after,
.hairlines .line-bottom::after {
  transform: none;
}
.hairlines .line-top::before,
.hairlines .line-bottom::after{
  height: 0.5px;
}
.hairlines .line-left::before,
.hairlines .line-right::after{
  width: 0.5px;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .line-top::before,
  .line-bottom::after {
    transform: scaleY(0.5);
  }
  .line-left::before,
  .line-right::after {
    transform: scaleX(0.5);
  }
}
/* 由于部分颜色比较淡，按实际比例缩放可能导致看不清分割线，所以可根据具体需求来决定是否按照实际像素比缩放 */
/*@media (-webkit-min-device-pixel-ratio: 3) {
  .line-top::before,
  .line-bottom::after {
    transform: scaleY(0.333333);
  }
  .line-left::before,
  .line-right::after {
    transform: scaleX(0.333333);
  }
} */
/* 边框 */
.border {
  position: relative;
}
.border::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #e8e8e8;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  transform-origin: left top;
}
.hairlines .border::after {
  display: none;
}
.hairlines .border {
  border: 0.5px solid #e8e8e8;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .border::after {
    width: 200%;
    height: 200%;
    transform: scale(0.5);
  }
}
/*@media (-webkit-min-device-pixel-ratio: 3) {
  .border::after {
    width: 300%;
    height: 300%;
    transform: scale(0.333333);
  }
} */

一像素显示-最佳实践

参考文献

iPhone 6 屏幕揭秘 / iPhone 6 Screens Demystified

从1px像素问题剖析像素及viewport

7种方法解决移动端Retina屏幕1px边框问题

移动web 1像素边框瞧瞧大公司是怎么做的

Retina屏的移动设备如何实现真正1px的线？

再谈mobile web retina 下 1px 边框解决方案

GPU云服务器云服务器前端绘制像素一像素图片显示问题照片显示问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113761.html

前端：移动开发 - 像素、viewport

摘要：表示单位面积上的物理像素点数目。比如原本像素高的顶部导航栏，在屏上用了个像素的高度来显示。参考译此像素非彼像素译不是像素的像素不是像素移动前端开发之的深入理解移动端尺寸基础知识张鑫旭设备像素比简单介绍知识 CSS 像素、物理像素、PPI CSS 像素 CSS 像素是 Web 编程的概念，本质上是为我们 Web 开发者创建的一个抽象结构，是相对的而不是绝对的。物理像素物理像素是...

QLQ 2019-08-29 10:58 评论0 收藏0
像素，css像素，物理像素，设备独立像素，分辨率大乱斗

摘要：我们用小米举例，屏幕像素物理像素为，设备独立像素为，也就是说，一个设备独立像素就包含个物理像素，同时我们能得出。本文主要阐述移动端布局中常遇到的一些基本概念，这些概念也适用于PC端，这些概念大概有：像素（pixel），ppi，分辨率，物理像素（physical pixel）， CSS像素，设备独立像素（devicedependent pixel）像素像素是图像显示的基本单位，同时...

LiveVideoStack 2019-08-30 15:54 评论0 收藏0
前端移动端适配总结

摘要：设备像素比缩写简称，也就是我们经常在谷歌控制台移动端调试顶端会看到的一个值。在移动端，默认的情况下，布局视口的宽度是要远远大于浏览器的宽度的。手淘团队布局现今，适配手机端 meta标签到底做了什么事情做过移动端适配的小伙伴一定有遇到过这行代码：但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度一致。然而，这种理解是很片面的。那么，这句话的本质到底...

sydMobile 2019-08-30 13:47 评论0 收藏0
前端移动端适配总结

摘要：设备像素比缩写简称，也就是我们经常在谷歌控制台移动端调试顶端会看到的一个值。在移动端，默认的情况下，布局视口的宽度是要远远大于浏览器的宽度的。手淘团队布局现今，适配手机端 meta标签到底做了什么事情做过移动端适配的小伙伴一定有遇到过这行代码：但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度一致。然而，这种理解是很片面的。那么，这句话的本质到底...

justjavac 2019-08-21 17:04 评论0 收藏0