Question

如果媒体宽度低于，请说726px，如何更改html元素？

例如我有一个图像，如果介质宽度低于726px，我想用另一个图像更改。

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

响应式动态HTML

3 个答案: