Media Queries / 根据屏幕尺寸加载不同的图片

Question

Media Queries / 根据屏幕尺寸加载不同的图片

4

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

我想做的就是创建三个不同尺寸版本的相同照片（一个约800像素宽，一个约1200像素宽，保留原始的1920像素宽度），并根据用于查看网站的屏幕尺寸和分辨率加载适当版本的图像。我还计划将原始（1920像素宽）照片的大小裁剪一些，以使其加载速度更快。

我想CSS3媒体查询是解决这个问题的方法？媒体查询也能解决视网膜显示问题吗？有人可以建议一篇涵盖基础知识的好文章吗？我希望不需要JavaScript解决方案（以防用户关闭了它）。该网站已经在线，您可以检查源代码。

谢谢大家！

- zbiber

3个回答

2

只要所有图像请求都带有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]

我不知道可能会有性能损失。现在只是尝试一下。

- Ivan Ferrer Villa

2

请注意，这并不能提高加载速度，请参考评论。

Bootstrap 3具有一些响应式工具，可以通过媒体查询显示/隐藏元素。

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

例如，给一个元素添加类 visible-xs，它只会在 XS 尺寸的设备上显示。

我刚刚在我的视图中实现了这个功能，而不是在 CSS 中，因为我想使用一个普通的 img 而不是一个带有背景图片的 "div"。

<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结构。

- scipilot

请注意，您的解决方案加载了所有图像并显示了适当的图像。问题是如何仅加载适当的图像。 - tao

@AndreiGheorghiu 这是一个很好的观点，这将是一个不好的解决方案，因为它将加载所有的变体而不仅仅是大的一个！可能可以向机制中添加display:none，并利用此处指出的浏览器优化：https://dev59.com/x2ct5IYBdhLWcg3wWMFF#12158668 - scipilot

你链接的答案也是这样说的。src="data:{data-image-here}"远非优化（图像数据放置在标签本身中），不同之处在于它是标记的一部分，而不是放置在单独的文件中。src="about:blank"确实不会加载任何内容，但是当应该加载图像时，您需要自己的JavaScript将about:blank替换为正确的URL，否则它仍然是一个死标记，不显示任何内容。我们正在谈论哪些浏览器优化？ - tao

重点是：CSS 不能根据媒体查询加载资源，这是有意为之的（因为媒体查询可以快速更改 - 即：设备的简单旋转）。目前唯一的方法是使用 srcset 属性。 - tao

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rolchau · Accepted Answer

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

所以，如果您想使用媒体查询，您需要将图像作为背景放在例如div标签上：在div上使用background-image的示例这个示例没有处理视网膜显示，但这里有一篇关于处理视网膜显示的文章： Retina Display媒体查询