Css 是否可以在视网膜显示器上自动提供正确尺寸的图像？

似乎在视网膜显示器上，我们需要提供2x图像，然后指定尺寸为半宽半高。这有点烦人，因为你必须A）查找图像的尺寸，然后B）手动输入宽度和高度的50%，这样它就不会显示为两倍大小

---

我很乐意提供分辨率为两倍的图像，但是有没有更快更简单的方法来指定它们实际应显示的尺寸？

您基本上需要在

中设置一些东西（在其他任何事情之前）来写一个cookie，该cookie将与所有请求一起发送到服务器

大概是这样的：

if((window.devicePixelRatio===undefined?1:window.devicePixelRatio)>1) document.cookie='HTTP_IS_RETINA=1;path=/';

然后，您需要读取服务器中的cookie，并决定是提供常规图像还是视网膜图像

您可以使用

mod rewrite

（

.htaccess

）

选项-多视图
重新启动发动机
RewriteCond%{HTTP_COOKIE}HTTP_IS_RETINA[NC]
重写cond%{REQUEST_FILENAME}@2x
重写规则^（.*）\（gif| jpg|png）$$1@2x.$2
#如果@2x不可用，请满足原始请求
重写cond%{REQUEST_FILENAME}-F
重写规则^（.*）@2x\（gif | jpg | png）$$1.$2

或者在别处解释它

资料来源：

---

看看这个：使用css媒体查询可能会有所帮助——也可能值得一看

<IfModule mod_rewrite.c>
    Options -MultiViews
    RewriteEngine on
    RewriteCond %{HTTP_COOKIE} HTTP_IS_RETINA [NC]
    RewriteCond %{REQUEST_FILENAME} !@2x
    RewriteRule ^(.*)\.(gif|jpg|png)$ $1@2x.$2
    # if @2x isn't available fulfill the original request
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)@2x\.(gif|jpg|png)$ $1.$2
</IfModule>