手记

从0到1认识Retina

不二之家
2018-11-01 21:51:56浏览 3298

苹果昨日又发新品，新款 MacBook Air、新款 Mac Mini 和新款 iPad Pro，Retina 视网膜显示屏(以下称 Retina)仍然被当做卖点之一，Retina 作为一个已经提出 6 年之久的概念，仍然有人不明白到底是什么，是一项革命性的技术还是特别的硬件? 它为什么能看起来很高清? 对我们前端程序员到底有什么影响呢，今天就为你详细解答~

Retina 从何而来?

Retina 显示屏作为一个新概念，由乔帮主于iPhone4 发布会首次提出，用来表示，在正常观看距离下足以使人肉眼无法分辨其中的单独像，从而大大提高人的观看体验。

Retina 到底是什么？软件技术？硬件屏幕？

首先在这里解答，Retina 屏仅仅是一个概念，或者营销术语，不是技术或者硬件。

在乔帮主首次提出 Retina 概念后，在第三代 iPad 发布会上，苹果给出了 Retina 设计标准的公式：

从这个定义我们可以看出，存在两个变量，h 像素间距 和 d 视距，也就是当改变任何一个变量，都可以达到相应效果！

苹果的相关产品通过缩小物理像素体积，减小 h 变量，使其达到了，在正常视距 d 范围内，肉眼无法看出单个像素

其实，另外一个变量就表明，任何显示器在一定的视距之后都会是 Retina

其实这个概念也好理解，我们看下面这个美女，如果你离 50cm 能看到雀斑，那你离 2M 还能看到雀斑吗， 道理是一样的

所以说

撇开视距说 Retina 就是耍流氓！！！

撇开视距说 Retina 就是耍流氓！！！

撇开视距说 Retina 就是耍流氓！！！

附录：公式原理

其中 α=1/60°, s 一个像素的尺寸，然后这个 d 就是最小 Retina 视距，超出这个距离，一般人就不能单独数像素了

Retina 显示屏好还是 4K 显示屏好?

在网上看到很多人在纠结究竟是买 4K 显示屏，还是买 Retina 显示屏，难道没人告诉你，有钱可以同时拥有即是 Retina 显示屏又是 4K 显示屏的显示器吗

4K 显示器是指只要是屏幕分辨率达到 3840×2160 的显示器，这里是不限制屏幕大小的，也就是说你的屏幕有房子那么大，但是分辨率达到 3840×2160，也是 4K 显示器，但是很明显他达不到在正常视距内，看不到像素的要求

PS：14 年 10 月苹果发布了 retina iMAC，分辨率达到 5120 X 2880，这块 retina 屏幕既是超过 4K 分辨率的 5K 屏幕，同时也是 retina 屏幕

Retina 显示屏对前端的影响?

图片模糊问题

原因

设备像素，是指显示器上最小的物理显示单元

css 像素，是指浏览器用来精确的、统一的绘制网页内容的单位

正常情况下，实现 Retina 效果，需要通过缩小设备像素面积，提高设备像素像素的密度，如下图所示

从上图我们可以看出，通过缩小单个设备像素的面积，使得 1 个 CSS 像素用 4 个设备像素表示，这就产生了一个很严重的问题，1 个 CSS 像素本身作为最小单位，已经无法再进一步分割，只能就近取色，因而导致图片变虚

解决思路

  • 使用矢量图，矢量图可以无限放大不失真，这样便不存在位图的像素的问题(SVG, Iconfont)

  • 动态替换图片，通过 CSS 或者 JS 查询像素密度，进行在相应屏幕下加载相应的图片（retina.js)

实现方式

请转到走向 Retina Web

1px 边框问题

原因

基本和上个问题的一样，1px 在 retina 屏下，由 2 个物理像素显示，比正常 1 个物理像素显示会粗一倍

解决思路

通过各种手段实现 0.5px 的效果

实现方式

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

PS：以下是在实际开发中使用最广泛的伪类 + transform 代码， 用法：在需要的边框上加上相关类，即可 .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-bottomleft


@charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {
  position: relative;
}
.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after {
  content: '\0020';
  overflow: hidden;
  position: absolute;
}
/* border
 * 因，边框是由伪元素区域遮盖在父级
 * 故，子级若有交互，需要对子级设置
 * 定位 及 z轴
 */
.border::before {
  box-sizing: border-box;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 1px solid #eaeaea;
  transform-origin: 0 0;
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
  left: 0;
  width: 100%;
  height: 1px;
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
  top: 0;
  width: 1px;
  height: 100%;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
  border-top: 1px solid #eaeaea;
  transform-origin: 0 0;
}
.border-right::before,
.border-rightbottom::before,
.border-rightleft::before,
.border-topright::after {
  border-right: 1px solid #eaeaea;
  transform-origin: 100% 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::before {
  border-bottom: 1px solid #eaeaea;
  transform-origin: 0 100%;
}
.border-left::before,
.border-topleft::after,
.border-rightleft::after,
.border-bottomleft::after {
  border-left: 1px solid #eaeaea;
  transform-origin: 0 0;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
  top: 0;
}
.border-right::before,
.border-rightleft::after,
.border-rightbottom::before,
.border-topright::after {
  right: 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::after {
  bottom: 0;
}
.border-left::before,
.border-rightleft::before,
.border-topleft::after,
.border-bottomleft::before {
  left: 0;
}
@media (max--moz-device-pixel-ratio: 1.49),
  (-webkit-max-device-pixel-ratio: 1.49),
  (max-device-pixel-ratio: 1.49),
  (max-resolution: 143dpi),
  (max-resolution: 1.49dppx) {
  /* 默认值，无需重置 */
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),
  (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),
  (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),
  (min-resolution: 144dpi) and (max-resolution: 239dpi),
  (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
  .border::before {
    width: 200%;
    height: 200%;
    transform: scale(0.5);
  }
  .border-top::before,
  .border-bottom::before,
  .border-topbottom::before,
  .border-topbottom::after,
  .border-topleft::before,
  .border-rightbottom::after,
  .border-topright::before,
  .border-bottomleft::before {
    transform: scaleY(0.5);
  }
  .border-right::before,
  .border-left::before,
  .border-rightleft::before,
  .border-rightleft::after,
  .border-topleft::after,
  .border-rightbottom::before,
  .border-topright::after,
  .border-bottomleft::after {
    transform: scaleX(0.5);
  }
}
@media (min--moz-device-pixel-ratio: 2.5),
  (-webkit-min-device-pixel-ratio: 2.5),
  (min-device-pixel-ratio: 2.5),
  (min-resolution: 240dpi),
  (min-resolution: 2.5dppx) {
  .border::before {
    width: 300%;
    height: 300%;
    transform: scale(0.33333);
  }
  .border-top::before,
  .border-bottom::before,
  .border-topbottom::before,
  .border-topbottom::after,
  .border-topleft::before,
  .border-rightbottom::after,
  .border-topright::before,
  .border-bottomleft::before {
    transform: scaleY(0.33333);
  }
  .border-right::before,
  .border-left::before,
  .border-rightleft::before,
  .border-rightleft::after,
  .border-topleft::after,
  .border-rightbottom::before,
  .border-topright::after,
  .border-bottomleft::after {
    transform: scaleX(0.33333);
  }
}

以上便是从 0 到 1 认识 Retina，不知道读过以后对 Retina 是不是有更深的理解， 欢迎留言评论

参考

相关标签
Html/CSS
Html5
CSS3
1人推荐
随时随地看视频
慕课网APP

相关阅读

webapp中如何运用CSS3动画
多视角3D可旋转的HTML5 Logo动画
CSS3 基础之 旋转的发光盒
CSS：玩转grid布局
纯CSS的星级评价效果