媒体查询/根据屏幕大小加载不同的图像-Java 学习之路

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

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

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

Thanx all！

3 回答

3

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

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

Example with background-image on a div

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

回复于 2024-04-30T17:31:01+08:00
3
Bootstrap 3有一些响应式实用程序，允许您通过媒体查询显示/隐藏元素 .

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

例如为元素提供类 visible-xs ，它只会在XS大小的设备上显示 .

我刚刚在我的视图中实现了这个，而不是在CSS中，因为我想使用直 img 而不是"div with background image"
```
<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结构 .
回复于 2024-04-30T17:31:01+08:00

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

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

.htaccess in / images文件夹：

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]

我不知道可能的性能打击 . 现在就试试吧 .

回复于 2024-04-30T17:31:01+08:00

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

3 回答

相关问题