Question

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

古怪的部分是大部分文字，例如菜单项目将是图像 - 不是我的想法，而且我害怕我无法改变。

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

如果不是因为我可能会选择“adaptive-images.com”。

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

我能想到的是什么：

将图片作为背景加载 - 感觉有点肮脏。
插入两个版本并切换css显示属性 - 非常肮脏！
写一个设置所有img链接的javascript - 感觉有点矫枉过正？

任何人都能找到一个好的解决方案吗？：）

Answer 1

其他选择。不需要脚本，只需要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;
  }
}

Answer 2

如果它只是一些图像（并且它们已经过优化），那么通过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">

也请阅读this article。

更新 - 额外的例子：

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

Answer 3

今天的大多数浏览器are supporting 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>

Answer 4

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

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

<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);
    });
}

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

Answer 5

我会做的是：
使用图像作为每个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'将已经加载到浏览器中，转换将非常顺利和快速。

在响应式设计中更改img src？

5 个答案: