苹果昨日又发新品，新款 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)
实现方式
1px 边框问题
原因
基本和上个问题的一样，1px 在 retina 屏下，由 2 个物理像素显示，比正常 1 个物理像素显示会粗一倍
解决思路
通过各种手段实现 0.5px 的效果
实现方式
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 是不是有更深的理解， 欢迎留言评论
随时随地看视频
