Question

这可能是基本的，但我迷失在我在网上找到的所有解决方案中。我有一个基于Twitter Bootstrap 3的运行网站（www.webstalab.com），但使用的图像（描绘两个拿着球的雕像）的尺寸相当大（大约900kb），因此在较慢的互联网连接上加载时间过长。目前的照片宽1920像素，是响应的，它不是背景图像。（我无法使用背景图像方法实现所需的布局。）

我想要做的就是创建同一张照片的3个不同尺寸版本（一个宽约800px，一个宽约1200px，并保持原始宽度为1920px）并让浏览器根据具体内容加载适当版本的图像屏幕大小和分辨率用于查看网站。我还计划稍微缩小原始（1920像素宽）照片的尺寸，以便加载更快。

我想CSS3媒体查询是这样的吗？媒体查询是否也会解决视网膜显示问题？任何人都可以推荐一篇涵盖基础知识的好文章吗？我更喜欢没有javascript的解决方案（以防用户关闭它）。该网站在线，因此您可以查看源代码。

Thanx all！

Answer 1

如果使用img标签显示图像，那么是的，您将需要一个JS解决方案。

因此，如果您想使用媒体查询，则需要将图像用作背景，例如div标记：

Example with background-image on a div

该示例没有视网膜显示处理，但这里有一篇关于处理的文章： Retina Display Media Queries

Answer 2

请注意，这对加载速度没有帮助，请参阅评论。

Bootstrap 3有一些响应式实用程序，允许您通过媒体查询显示/隐藏元素。

http://getbootstrap.com/css/#responsive-utilities

e.g。为类visible-xs提供一个元素，它只会显示在XS大小的设备上。

我刚刚在我的视图中实现了这一点，而不是在CSS中，因为我想使用直接img而不是＆＃34; div与背景图像＆＃34;

<div class="navbar-header">
    <a href="/home" class="navbar-left" >
        <img class="logo visible-sm visible-md visible-lg"
             src="/images/logos/logo-trans-96-wht-250x70.png"
             width="250" height="70"
             alt="Home"/>
        <img class="logo visible-xs"
             src="/images/logos/logo-trans-96-wht-200x56.png"
             width="200" height="56"
             alt="Home"/>
        </a>
</div>

从CSS的角度来看，它并不是非常优雅，但这是您无法通过CSS控制某些内容的少数几次之一。

它为您提供了一种强大而简单的技术，可以响应性地交换整个HTML结构。

Answer 3

只要与所有图像请求一起发送cookie，您就可以使用.htaccess文件中的重写规则重定向到低分辨率图像，具体取决于使用JavaScript在页面加载开始时设置的cookie的值。
index.html：

<head>
(...)
        <script type="text/javascript">           
            document.cookie = "res=" + (screen.width <= 700 ? "low" : "high");
        </script>
<!--styles-->
(...)
<head>

/ images文件夹中的

.htaccess：

RewriteEngine on
#if cookie res=low exist, redirect to low/ folder
RewriteCond %{HTTP_COOKIE} res=low
RewriteRule ^(.+)$ low/$1

#if low/ image does not exist, use default (hi res)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^low/(.+)$ $1 [END]

我不知道可能的性能损失。现在就试试吧。

媒体查询/根据屏幕大小加载不同的图像

3 个答案: