Question

可能重复：
How do I set retina graphics for my website?

将2x图像添加到将使用Retina图形在新iPad上显示的网页的最佳方法是什么？

我已经阅读了这些文章。

http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/

http://www.teamdf.com/web/automatically-serve-retina-artwork/191/

http://retinajs.com/

Answer 1

有许多建议的方法可以解决Retina显示屏（以及大型显示屏等）的问题，遗憾的是，其中大多数只是建议。

最受欢迎的两个是添加标记的建议，该标记接受多个图像，浏览器只加载一个（取决于开发者指定的媒体查询）：

<picture alt="angry pirate">
   <source src=hires.png media="min-width:800px">
   <source src=midres.png media="min-width:480px">
   <source src=lores.png>
      <!-- fallback for browsers without support -->
      <img src=midres.png alt="angry pirate">
</picture>

另一个建议是在图像上使用'srcset'指定图像的多个来源：

<img alt="Cat Dancing" src="small-1.jpg"
srcset="small-2.jpg 2x,  // this is pretty cool
large-2.jpg 100w,       // meh
large-2.jpg 100w 2x     // meh@2x
">

我个人认为这更难看（并且由于浏览器决定加载哪个图像而让你失去控制）但是根据我的理解，第二个解决方案已被添加到官方规范（以某种身份）

除了这些建议之外，唯一真正的当前解决方案是从图像开始2倍原始尺寸（或1.5倍，取决于您的偏好）

有可能尝试获得所有想象力并做一个JavaScript解决方案，但我认为这将使事情变得复杂......

下面是一篇非常好的文章，讨论了你描述的问题（我觉得我有点乱了！）： http://www.alistapart.com/articles/mo-pixels-mo-problems/

处理Retina显示器的最佳方法是什么？

1 个答案: