Question

我读到了关于视网膜准备好的网站，我得到了一些信息，如在视网膜准备好的网站图像，滑块，字体和其他元素更锐利，更密集和高分辨率......

我的问题是：

如何使用图像，字体和其他内容将普通网站转换为视网膜状态......

<img src="image1@2x.jpg" width="660" height="440"/>

原始宽度 660px和高度： 440

我已经导入了retina.js

提前致谢

Answer 1

如果您想使用高密度图像，则必须设置另一个属性：srcset。

通过这种方式，src属性对于不支持srcset属性的旧浏览器非常有用。现代浏览器使用srcset属性，如果屏幕已准备就绪，将使用它来加载高密度“@ 2x”图像。如果屏幕不是视网膜，浏览器将自动加载低密度图像“@ 1x”。

<img srcset="image@1x.jpg 1x, image@2x.jpg 2x" src="image@1x.jpg" alt>

如果您需要有关它的更多信息，可以从MDN查看此文章。有更多属性可以帮助您喜欢size。