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

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

html css twitter-bootstrap

Html 媒体查询/根据屏幕大小加载不同的图像,html,css,twitter-bootstrap,media-queries,Html,Css,Twitter Bootstrap,Media Queries,这可能是最基本的，但我在网上找到的所有解决方案中都迷失了方向。我有一个基于Twitter Bootstrap 3的运行网站（www.webstalab.com），但使用的图像（描绘两个拿着球的雕像）非常大（约900kb），因此在较慢的互联网连接上加载的时间太长。目前的照片是1920像素宽，是响应，它不是一个背景图像。（我无法使用背景图像方法实现所需的布局）我所要做的就是为同一张照片创建3个不同大小的版本（一个约800px宽，一个约1200px宽，并将原始照片保持在1920px宽），然后让浏

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

我所要做的就是为同一张照片创建3个不同大小的版本（一个约800px宽，一个约1200px宽，并将原始照片保持在1920px宽），然后让浏览器根据用于查看网站的屏幕大小和分辨率加载相应版本的图像。我还计划将原始照片（1920像素宽）的尺寸缩小一点，以便加载速度更快

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

谢谢

如果您使用

img

标记来显示图像，那么是的，您将需要一个JS解决方案

因此，如果您想使用媒体查询，您需要使用图像作为背景，例如

div

标记：

示例中没有视网膜显示处理，但这里有一篇关于处理的文章：

只要cookie与所有图像请求一起发送，您就可以使用

.htaccess

文件中的重写规则重定向到低分辨率图像，具体取决于页面加载开始时使用JavaScript设置的cookie值。

index.html

：

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

我不知道可能的性能打击。现在就试一下。

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

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

e、 g.给一个元素类

visible xs

，它将只显示在xs大小的设备上

我只是在我的视图中实现了这一点，而不是在CSS中，因为我想使用一个直接的

img

而不是“带背景图像的div”

从CSS的角度来看，它感觉不是很优雅，但这是少数几次您无法从CSS控制某些内容的情况之一

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

忘了提及-如果您使用媒体查询，首先设置最小的图像很重要，如果您不这样做，它仍将在较小的设备上加载较大的图像。感谢Rolchau，这非常有帮助，为了学习/实践，我可能会研究一些JS解决方案。想要更新您的答案，但声誉不足…只需使用jQuery检测视口宽度，一堆if-else循环将帮助您替换源。请注意，您的解决方案将加载所有图像并显示相应的图像。问题是如何只加载适当的一个。@AndreiGheorghiu这是一个很好的观点，这将是一个糟糕的加载速度解决方案，因为它将加载所有变体，而不仅仅是大的变体！可能会将display:none添加到机制中，并利用此处提到的浏览器优化：链接的答案表示相同

src=“data:{data image here}”

远远不是一种优化（图像数据放在标记本身中），不同之处在于它是标记的一部分，而不是放在单独的文件中

src=“about:blank”

确实不会加载任何内容，但在加载图像时，您需要使用自己的JavaScript将

about:blank

替换为正确的URL，否则它仍然是一个死标签，不会显示任何内容。我们在谈论什么样的浏览器优化？重点是：CSS无法基于媒体查询加载源，这是出于设计（因为媒体查询可以快速更改，例如：设备的简单旋转）。目前，唯一的方法是使用

srcset

属性。

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]

<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>