javascript - 响应式动态html

Question

如果媒体宽度低于 726px ，我如何制作一个 html 元素来更改？

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

Answer 1

设置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)
}

Answer 2

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

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

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