响应式动态html答案

【问题标题】：responsive dynamic html响应式动态html
【发布时间】：2013-02-08 18:50:45
【问题描述】：

如果媒体宽度小于 726px ，我如何使 html 元素发生变化？

例如，我有一张图片，如果媒体宽度低于 726 像素，我想用另一张图片进行更改。

【问题讨论】：

标签： javascript html css image responsive-design

【解决方案1】：

我建议将您的低分辨率样式捆绑在一个单独的 css 文件中，您可以通过在 html 头部部分包含以下链接来激活该文件：

    <link rel="stylesheet" media="only screen and (max-width:726px)" href="your-low-res-styles.css" title="norrowscreen" />

关于你的问题：“有没有办法改变 html...”：在你的代码中包含一个 matchMedia 监听器：

if (window.matchMedia !== undefined) {
    var mq = window.matchMedia("(max-width: 726px)");
    mq.addListener(onWidthChange);
    onWidthChange(mq);
}
function onWidthChange(mq) {
    if (mq.matches) {
        $("#img0").attr("src", url1);
    } else {
        $("#img0").attr("src", url2);
    );
};

【讨论】：

【解决方案2】：

设置css在726px之前生效

@media screen and (max-width: 726px) {
   background-image: url(image-med.png);
}

@media screen and (min-width: 727px) {
   background-image: url(image-big.png)
}

【讨论】：

这很好，但我想在背景图像的 html 中使用标记中的图像。有没有办法根据媒体宽度更改 html 代码，比如在 css 中？
您可以使用一个小的 jquery 插件：github.com/teleject/hisrc，然后将您的 img 标签设置为：<img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png">

【解决方案3】：

@media only screen and (max-width: 726px){
#div{  background-image: url(image-1.png)}
}
@media only screen and (min-width: 727px){
#div{  background-image: url(image-2.png)}
}

【讨论】：

这很好，但我想在背景图像的 html 中使用标记中的图像。有没有办法根据媒体宽度更改 html 代码，比如在 css 中？