随着目前仅来自Apple的视网膜显示产品系列的不断增长，现在可以确定您的WordPress主题在这些设备上看起来很热门。在本文中，我将介绍您必须为主题添加视网膜支持的几种不同选项。
什么是视网膜？

视网膜显示器（Retina Display）是苹果公司用于液晶显示器的商标，该液晶显示器具有足够高的像素密度，人眼无法在典型的观看距离上注意到像素化现象（http://en.wikipedia.org/wiki/Retina_Display）。

那么这如何影响您主题中的图像？

典型的监视器为72ppi或每英寸像素，而Retina显示屏的范围为135-300ppi。这对于主题中的图像意味着什么，在标准LCD显示器上很好地观看72ppi图像看起来一切都很好，但是在Retina显示设备上拉起相同的图像，它将看起来非常模糊。我们如何纠正这种情况？在我的朋友上阅读…

1. CSS3>图片

可能最明显的选择是使用CSS3，并且浏览器的支持一天比一天好-使用CSS3属性毫无疑问。例如，线性背景渐变，边框半径，框阴影和文本阴影等与  RGBA  一起使用时，可以创建漂亮的按钮，如下例所示。如果不使用图像，HTTP请求越少，您的站点加载速度就越快。

2. @ 2x图片

@ 2x，那是什么！？考虑一下72ppi图像，当前标准为@ 1x，在普通显示器上看起来很棒。现在，在Retina显示屏上，您看到的是基本两倍的分辨率，这就是@ 2x发挥作用的地方，对吗？基本上@ 2x是Apple放置的Retina图像和图形的标准。

投入使用后，您将拥有72ppi文件，例如logo.png和另一个logo@2x.png，非常简单。

您如何为视网膜设备提供@ 2X图像？

强大的开源脚本  Retina.js  使向Retina设备提供高分辨率图像变得异常容易。如果在这种情况下存在该图像的高分辨率变体logo@2x.png，则脚本将自动就地交换该图像。就那么简单。

如果在CSS中使用背景图片，则需要使用简单的媒体查询，例如：

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
     #menu-icon { background-image: url(../images/icons/menu@2x.png);}
}

3.内联img元素

假设您有一个大型照相馆，并且每个图像都制作两个版本就不可能了。另一个很棒的开源脚本是  Foresight.js，它使您的主题能够在服务器请求其之前确定用户设备是否能够查看高分辨率图像。它还检查用户设备当前是否具有足够快的网络连接来获取高分辨率图像。根据设备的显示和网络连接性，foresight.js将请求显示适当的图像。

4.图标字体

图标字体是直线上升真棒，他们是无限扩展的，可以改为任何颜色，有透明击倒，变混浊，动画与CSS3，以及更多！有很多付费和开源解决方案。我个人比较喜欢开源  字体真棒  包，还有目前已经结束了220的图标，其完全免费使用用于商业用途和其该死易于使用。

你还在等什么？立即开始应用这些做法！

---

---

需要提供WordPress主题/插件的汉化服务可以随时联系我们！另外成品WordPress网站以及半成品WordPress网站建设，海外Google SEO优化托管服务，百度SEO优化托管服务，Centos/Debian服务器WP专用环境搭建，WP缓存服务器搭建，我们都是你的首选，拥有多年WP开源程序服务经验，我们一直在坚持客户体验，没有最好，只有更好！