解决方法
在您的
HTML中,创建< div>像这样:
<div class="ninjas-image"></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.
原文地址:https://www.jb51.cc/html/230629.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。