支持高密度视网膜显示的5种方法-js教程-PHP中文网

5 Ways to Support High-Density Retina Displays

支持高密度视网膜显示的5种方法

布伦丹·戴维斯（Brendan Davis）在我最近的文章“响应式网络设计和滚动条：Chrome的实现更好？ 简短的答案是：不 - 但是我们需要更深入地研究他们可能引起的问题。 什么是视网膜？

“视网膜”是苹果的双密度屏幕的品牌名称，但其他制造商正在创建类似的显示器。该技术用于最近的iPhone，iPad，MacBook Pros和其他高端设备。例如，MacBook Pro 15“的分辨率为2,880×1,800或220像素 /英寸。在这个规模上，大多数人无法在典型的观看距离上注意到单个像素 - 应用程序和网站太小而无法使用。

因此，该设备恢复为1,440×900的标准分辨率，但是附加像素可用于使字体和图形看起来更光滑。

有什么问题？

>标准分辨率位图图像在视网膜显示屏上看起来可能是块状的。 400 x 300的照片缩放到800 x 600像素，但没有其他细节。与光滑字体和其他高分辨率图像相比，这可能是显而易见的。

现实世界的用法

>如果您环顾网络，您会因为认为每个人都有视网膜显示屏而被原谅。目前，它仅在高端设备中可用，但是这些设备被开发人员垂涎，因此导致了不成比例的在线讨论。在现实世界中，使用类似显示的人的百分比为低单人物。

>让我们介绍一下：如果您不是为1％的IE6/7用户开发，那么您可能不应该太担心使用Rentina的人 - 尤其是因为他们仍然可以查看您的网站。也就是说，类似视网膜的屏幕最终将迁移到所有设备。现在几乎没有理由烦恼，但是某些前进计划没有任何伤害。让我们以推荐顺序查看选项……

>

1。使用SVG和CSS3效果

线索在名称中，但可扩展的向量图形是…

可伸缩！

> svg的大小无关紧要 - 它总是很平稳，因为它是使用向量（线条和形状）而定义的，而是比单个像素。

对于照片，图表和图表的理想选择，

> svg是不切实际的。主要缺点是IE8及以下缺乏支持，但您始终可以提供PNG后备或使用诸如Raphaël或svgweb之类的垫片。另请参阅：如何将可扩展的向量图形添加到您的网页。

>您也可以完全替换一些图像。例如，可以单独使用CSS3复制标题，渐变，角或阴影。它们的质量会更高，导致HTTP请求较少，并且使用较少的带宽。

2。使用WebFonts图标

我使用WebFonts图标越多，我就越爱它们。像SVG一样，字体是向量，因此它们是可扩展的，因此您可以使用包含图标的字体集。它们非常适合经常使用的小型形状，例如电子邮件信封，电话，小部件控件和社交媒体徽标。它们还可以在包括IE6在内的每个浏览器中工作。

有很多商业和免费图标字体套件可用：

> tymeson
>字体真棒
标志性
基础

或您可以使用托管字体服务，例如我们喜欢图标字体。

我建议使用Fontello或Icomoon等在线工具创建自己的小型自定义图标。

3。当实用

时，请使用高分辨率图像

视网膜的像素是标准屏幕的四倍。如果您有400 x 300映像（120,000像素），则需要使用800 x 600替代方案（480,000像素）在高密度显示器上呈现良好。但是，高分辨率文件大小不一定要大四倍。每个图像都不同，但是如果它包含可省略的颜色或细节的坚实块，则使用800 x 600图像并将其扩展在浏览器中。

务实：如果标准图像为200kb，高分辨率版本为250kb，则使用图像替换技术具有可忽略的好处。在整个过程中都使用更好的版本。

4。使用CSS图像更换

>有时会使图像的高分辨率版本大四倍或更多。在这种情况下，您可能需要考虑图像更换技术，即标准图像被视网膜显示屏上的较大替代方案所取代。可以使用以下媒体查询代码：

缺点：

#myimage {
	width: 400px;
	height: 300px;
	background: url(lo-res.jpg) 0 0 no-repeat;
}

@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5) {
	#myimage {
		background-image: url(hi-res.jpg);
	}
}

登录后复制

>您需要创建和维护两组图像。

一些浏览器将下载这两个图像。