视网膜（高DPI）的背景图像，CSS媒体查询

济南网站建设只用视网膜高DPI背景图像技术。 本周我们将告诉你如何使用高分辨率的CSS背景图像的视网膜或高DPI显示器工作。 这是我们相信这将真正的趋势，开始成为标准的做法在2013年。 特别是在去年看到了一些新的高DPI设备，如MacBook Pros笔记本电脑，iPad和点燃的释放。

在这个迷你截图我从我的视网膜的MacBook的英国广播公司天气预报的网站了，你可以看到在旁边的Retina分辨率矢量文字模糊72DPI云图标。

正如你可能知道，视网膜屏幕通常有四个像素，你希望看到只有一个。 这意味着，定期72DPI光栅图形的大小增加一倍，看起来模糊进出的地方。

印刷术，CSS3 SVGs和图标字体铺平了道路快装，清脆的高清设计，但是最佳实践与嵌入图像的工作仍然是一个不断发展的实践。

尽管如此，一些伟大的插件已经开始出现像retina.js和WP视网膜X2 -这动态提供更高分辨率的图像对那些与高DPI屏幕。

进入CSS3媒体查询

好消息然而，就是与背景图像像精灵的工作更容易的工作。 CSS3为我们带来了媒体查询已成为响应性的Web设计的基石。 以同样的方式媒体查询发现视口大小，他们也可以检测目前所有的高DPI分辨率以下的CSS：

进入CSS3背景大小属性

CSS3中介绍，背景大小属性允许你指定你的背景图片的尺寸，这将使我们能够这样它可以将分辨率相匹配的视网膜装置的缩小图像。 这可以通过以下方式来完成：

任何物业这三个用途将让你实现的结果，但是我建议由像素指定大小，只有指定的宽度。 如果你根本就没有指定高度，它会自动按比例添加到您指定的宽度。 所以，如果你把它放在一起，就像在我们的视频教程，你完成的CSS代码应该看起来像这样：

完整的CSS标记

是否值得呢？

是的，在我看来这是绝对值得去努力。 即使你的设计在短短的几个关键项目，如精灵或您网站的主要标志。 我也认为这是设备蓄着视网膜显示屏将很可能使用支持CSS3的浏览器，因此媒体查询和背景-size属性公平的假设。

在其中一个地方产生两个不同分辨率的图像将需要一些额外的时间，但这样做的结果看起来棒极了。 如果你足够幸运，现在要浏览一个Retina屏幕上，检查出这些例子在网上看到网页设计的演变：

• 碎杂志的标志
  虽然不是通过这种技术动态提供，碎杂志的网站标志被嵌入在视网膜上的大小为所有设备，它看起来精湛的高DPI屏幕。
• 活动监视器的主页
  活动监视器有一个可爱的，当代的主页是完全视网膜兼容。 使用相同的媒体查询，并在我们的例子背景尺寸组合，他们服务于一个单独的和独特的Retina样式表。