使用RetinaJS在移动设备上提供高分辨率图像

最新推荐文章于 2024-09-25 10:59:43 发布

cune1359

最新推荐文章于 2024-09-25 10:59:43 发布

阅读量298

点赞数

文章标签： java python css opencv 人工智能

现在，移动设备上的高分辨率屏幕已成为一种规范。这些图像为用户提供了更清晰锐利的外观，一旦他们习惯了这种高质量的图像，Web开发人员就被迫为他们的用户制作高质量的图像。我们十年前使用的大多数图像肯定会在视网膜显示屏上变得模糊，因此我们需要一种新的方式在Web上呈现图形。

根据图像的目的，我们采用的方法会有所不同。字体图标和SVG现在是提供图标或徽标的更好方法，而媒体查询是从CSS提供图像的方法。

但是，如果您想在人体内容中提供高分辨率图像，则可以使用Retina.js。 Retina.js ，一个JavaScript库，使提供高分辨率图像变得轻而易举。您甚至不必修改很多代码。让我们来看看。

入门

Retina.js不依赖任何形式的第三方库。您所需要做的就是下载retina.js 文件并将其链接到您的文档中。或者，您可以像这样从CDNJS.com链接文件。

<script src="//cdnjs.cloudflare.com/ajax/libs/retina.js/1.0.1/retina.js"></script>

Retina.js提供了两种方法来提供高分辨率图像。

方法一

在其初始版本中，Retina.js采用与Apple在其设备中相同的方法，该方法将高清晰度图像附加到@ 2x后缀。因此，如果您有一个名为autumn.jpg的图像，则将高分辨率版本命名为autumn@2x.jpg 。在版本1.3.0中，Retina.js引入了新的后缀_2x 。因此，除了@2x之外，您还可以将图像命名为autumn_2x.jpg 。

在高分辨率屏幕上查看您的网站时，Retina.js将检查服务器中是否包含这些后缀的图像，并将用其替换常规图像。为确保Retina.js成功获取图像，您必须将高分辨率图像保存在保存常规版本的目录中。

方法二

另一种方法是通过使用img标签中的data-at2x ，就像这样。

<img src="img/autumn.jpg" data-at2x="img-hi-res/image-autumn.jpg" alt="">

通过使用此data-属性，您可以不同地设置文件夹或图像的名称，并且Retina.js将不会执行服务器检查；这将加快流程。

在单独的屏幕中打开您的网站；一个在常规屏幕上，另一个在高分辨率下。比较它们，您将看到差异（如下所示）。

少混合

Retina.js还提供了一个LESS .at2x来通过CSS提供图像。这个例子：

.social-icons {
	.at2x('image/icons.jpg');
}

…当编译为常规CSS时将变成以下内容。

.social-icons {
  background-image: url('image/icons.jpg');
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  .social-icons {
    background-image: url("image/icons@2x.jpg");
    background-size: auto auto;
  }
}

很方便，对不对？