23

我即将编写一个响应式布局，它可能包含三个不同的“状态”。

奇怪的部分是大部分文本，例如菜单项将是图像——这不是我的想法，我恐怕没有什么可以改变的。

由于每个状态的图像会略有不同，除了大小之外（例如，在最小的状态下，菜单变成浮动按钮而不是常规标题），我需要切换图像而不是仅仅缩放相同的图像。

如果不是这样，我可能会选择“adaptive-images.com”。

所以，我需要一些关于最佳实践解决方案的意见。

我能想到的：

  • 将图像加载为背景——感觉有点脏。

  • 插入两个版本并切换 css 显示属性 - 非常肮脏！

  • 编写一个设置所有 img 链接的 javascript - 感觉有点矫枉过正？

有人坐在一个好的解决方案上吗？:)

4

5 回答 5

42

其他选项。不需要脚本，只需要 CSS。

HTML

<div id="mydiv">
    <img src="picture.png" class="image_full">
    <img src="picture_mobile.png"  class="image_mobile">
</div>

CSS

.image_full{
   display:block;
  }

 .image_mobile{
  display:none;
 }

@media (max-width: 640px) and (min-width: 320px){
  .image_full{
   display:none;
  }

  .image_mobile{
   display:block;
  }
}
于 2015-03-12T17:30:28.927 回答
14

如果只是几张图片（并且它们已经过优化），那么通过 CSS 隐藏它们是没有问题的。如果它很多，那么看看Response JS它将src为您即时更改。试试这个：

<body data-responsejs='{ "create": [
    { "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] }
]}'>

<img src="small.png" data-min-width-481="medium.png" alt="example">

也阅读这篇文章。

更新- 额外的例子：

<body data-responsejs='{ "create": [
    { "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] }
  , { "prop": "device-pixel-ratio", "breakpoints": [0, 1, 1.5, 2] }
]}'>

<img src="small.png" data-device-pixel-ratio-1.5="medium.png" alt="example">
于 2012-05-04T07:03:36.440 回答
14

今天的大多数浏览器都支持 picture标签。因此，您可以使用它来根据视口宽度更改图像。

<picture>
    <source media="(min-width: 1200px)" srcset="/img/desktop-size.png">
    <source media="(min-width: 768px)" srcset="/img/medium-size.png">
    <img src="/img/mobile-size.png"/>
</picture>
于 2017-10-29T15:47:12.427 回答
2

我是第三选择的粉丝，因为它不会加载多个图像并节省带宽。

由于移动优先的设计，首先我加载这样的小图像：

<div id="mydiv">
    <img src="myphoto1_normal.jpeg" width="24" height="24" alt="myphoto1"/>
    <img src="myphoto2_normal.jpeg" width="24" height="24" alt="myphoto2"/>
</div>

然后在文件加载后我运行这个脚本：

function resizeImages() {
    var width = window.innerWidth || document.documentElement.clientWidth;
    $("#mydiv img").each(function() {
        var oldSrc = $(this).attr('src');
        if (width >= 768) {
            var newSrc = oldSrc.replace('_normal.','_bigger.');
            var newWidth = 100;  var newHeight = 100;
        } else if ( width >= 480 ) {
            var newSrc = oldSrc.replace('_normal.','_big.');
            var newWidth = 50;  var newHeight = 50;
        }
        $(this).attr('src',newSrc);
        $(this).attr('width',newWidth);
        $(this).attr('height',newHeight);
    });
}

如果屏幕宽度很大，那么我使用此脚本将小图像更改为更大的图像。它在台式计算机上运行速度很快。而且它不在智能手机中运行。

于 2013-04-27T14:57:02.060 回答
1

我要做的是：
使用图像作为每个li元素的背景
创建一个带有各种大小的链接（图像）的精灵：

___ ___ ___ ___
__ __ __ __
_ _ _ _

比，使用@media 例如：。

@media only screen and (max-width : 480px) {
 /* here I would make my li smaller */
 /* here I would just change the li background position*/
}

图像'sprite' 将已经加载到浏览器中，并且过渡将非常顺利和快速地发生。

于 2012-05-03T21:28:40.920 回答