html – 用于移动和视网膜显示器上的高分辨率图像的CSS

概述我的网站图像看起来模糊的用户与视网膜显示. (例如,在Retina MacBook Pro上). 如何使用视网膜显示器向访客提供高分辨率图像,但是将标准尺寸的图像提供给其他人,同时保持图像的一致性？ 在您的 HTML中,创建< div>像这样： <div class="ninjas-image"></div> 在你的CSS中,添加： .ninjas-image { background-ima 我的网站图像看起来模糊的用户与视网膜显示. (例如,在Retina MacBook Pro上).

如何使用视网膜显示器向访客提供高分辨率图像,但是将标准尺寸的图像提供给其他人,同时保持图像的一致性？

解决方法 在您的 HTML中,创建< div>像这样：

<div ></div>

在你的CSS中,添加：

.ninjas-image {  background-image: url('ninja-devices.png');  wIDth: 410px;  height: 450px;}@media (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi) {  .ninjas-image {    background-image: url('ninja-devices@2x.png');    background-size: 410px 450px;  }}

这里的魔法是在CSS @media查询中.我们有一个双重尺寸的图像(ninja-devices@2x.png),当设备报告“设备像素比”为1.5(144 dpi)或更高时,我们进入.这样做可以通过将原始的较小图像传递给非视网膜设备来节省带宽,当然,它在视网膜设备上看起来非常棒.

注意：

这个答案在2016年更新,以反映最佳实践. min-device-pixel-ratio没有达到标准.相反,最小分辨率被添加到标准中,但桌面和移动Safari在编写时不支持(因此-webkit-min-device-pixel-ratio fallback).您可以查看最新信息：http://caniuse.com/#feat=css-media-resolution.

总结

以上是内存溢出为你收集整理的html – 用于移动和视网膜显示器上的高分辨率图像的CSS全部内容，希望文章能够帮你解决html – 用于移动和视网膜显示器上的高分辨率图像的CSS所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。