视网膜屏幕时代来临，赶快更新你的CSS吧
程序员文章站
2022-05-20 19:32:03
...
苹果的拥有视网膜屏幕的MacBook Pro发行到现在已经过了很久了，但很多web开发者们还在抓着胸前的键盘，忽视进步，将自己推入一种黑暗的“像素恐惧症”的深渊。
像素就是未来，它会不断出现在iPad、MacBook、iPhone或Android手机上。大量照片会向你扑过来，图标会浸透你的灵魂，字体通过屏幕像波尔卡舞的舞者一样给你滴迷 魂药。
视网膜屏幕的MacBook Pro目前来说仍然算是奢侈品，但我们已经有了快一年的视网膜屏幕iPad，两年半的iPhone 4。高清晰度显示的广泛使用率已经5倍于“江南style”。然而，要让互联网完全采用适合视网膜屏的图片仍然是有困难的。创业公司们在完全无视视网膜屏 的情况下，苦心设计数月他们的新网站，当人们在视网膜显示屏下看到这个网站时，它就像一个乱七八糟的像素团儿。
这是一个实际的、未经修饰的截图：
看到了吗？像素无处不在。我甚至看不到网站了：所有我能看到的就是黄色像素，棕色像素，红色像素…
有解决办法：
这个解决办法很简单，但很少实现：提供高分辨率的设备。
有一些方式可以做到这一点。Apple.com可能在互联网上有两个站点，大多数转移到高分辨率的资源上了，但他们使用了一些janky JavaScript的技术先下载1x图像（正常的分辨率），派一个请求来测试2x图像(两倍大小)是否存在，如果存在就下载，并从带有2x图像的DOM 里交换1x图像。你的眼睛明显会感觉到像有白内障，因为你在适应模糊形象的一瞬间就转变为一些令人舒服清晰的图像。当然，视网膜设备会产生额外的开销：加载两种图片和一个额外的请求。
最简单的方法就是直接加载2x资源：
现代浏览器对页面资源按比例缩小。这对图像来说是很不错的，比如logo——你想要像素以完美的比例展现较小的尺寸，那么你可以派一个设计师去参与计算所需 要的不同尺度的比例。对于低精度的屏幕你承担额外的带宽开销，但是那能用CSS选择器解决，根据像素密度显示资源。你甚至可以用SCSS或其他前端框架自 动实现。除此之外，探索像SVG和webfonts的矢量技术。创建您自己的图标设置或使用其他工具集，他们能够发挥巨大的作用，使得按钮和导航控件真正 的在高DPI屏幕上流行。你知道这样做需要更长时间吗？或许你认为这很容易，恐怕你只是拿最喜欢的1992年16x16图标来吹嘘成128x128的，这 或许就是你在过去的几十年里所做的吧。高分辨率显示还没有被广泛的使用，但到2013年底，肯定会开始改变。争取在曲线上升开始前行动吧.
还记得AJAX、DHTML以及CSS发布之前的日子吗？我们有5年时光，倍感光荣地使用<table>标签及绝佳的1X1.gif图像，他们确实为我们服务的很好。但接下来的事情就像禅宗花园爆炸了一样，从根本上改变了我们对互联网的整体看法。
为了保护你的资产，赶紧去更新你的CSS吧！
Via gbtags
像素就是未来，它会不断出现在iPad、MacBook、iPhone或Android手机上。大量照片会向你扑过来，图标会浸透你的灵魂，字体通过屏幕像波尔卡舞的舞者一样给你滴迷 魂药。
视网膜屏幕的MacBook Pro目前来说仍然算是奢侈品，但我们已经有了快一年的视网膜屏幕iPad，两年半的iPhone 4。高清晰度显示的广泛使用率已经5倍于“江南style”。然而，要让互联网完全采用适合视网膜屏的图片仍然是有困难的。创业公司们在完全无视视网膜屏 的情况下，苦心设计数月他们的新网站，当人们在视网膜显示屏下看到这个网站时，它就像一个乱七八糟的像素团儿。
这是一个实际的、未经修饰的截图：
看到了吗？像素无处不在。我甚至看不到网站了：所有我能看到的就是黄色像素，棕色像素，红色像素…
有解决办法：
这个解决办法很简单，但很少实现：提供高分辨率的设备。
有一些方式可以做到这一点。Apple.com可能在互联网上有两个站点，大多数转移到高分辨率的资源上了，但他们使用了一些janky JavaScript的技术先下载1x图像（正常的分辨率），派一个请求来测试2x图像(两倍大小)是否存在，如果存在就下载，并从带有2x图像的DOM 里交换1x图像。你的眼睛明显会感觉到像有白内障，因为你在适应模糊形象的一瞬间就转变为一些令人舒服清晰的图像。当然，视网膜设备会产生额外的开销：加载两种图片和一个额外的请求。
最简单的方法就是直接加载2x资源：
<img src="/images/header-500px.png" width="250"/>
现代浏览器对页面资源按比例缩小。这对图像来说是很不错的，比如logo——你想要像素以完美的比例展现较小的尺寸，那么你可以派一个设计师去参与计算所需 要的不同尺度的比例。对于低精度的屏幕你承担额外的带宽开销，但是那能用CSS选择器解决，根据像素密度显示资源。你甚至可以用SCSS或其他前端框架自 动实现。除此之外，探索像SVG和webfonts的矢量技术。创建您自己的图标设置或使用其他工具集，他们能够发挥巨大的作用，使得按钮和导航控件真正 的在高DPI屏幕上流行。你知道这样做需要更长时间吗？或许你认为这很容易，恐怕你只是拿最喜欢的1992年16x16图标来吹嘘成128x128的，这 或许就是你在过去的几十年里所做的吧。高分辨率显示还没有被广泛的使用，但到2013年底，肯定会开始改变。争取在曲线上升开始前行动吧.
还记得AJAX、DHTML以及CSS发布之前的日子吗？我们有5年时光，倍感光荣地使用<table>标签及绝佳的1X1.gif图像，他们确实为我们服务的很好。但接下来的事情就像禅宗花园爆炸了一样，从根本上改变了我们对互联网的整体看法。
为了保护你的资产，赶紧去更新你的CSS吧！
Via gbtags
推荐阅读