html - 基于屏幕分辨率的不同html代码

Question

目前我根据使用的屏幕尺寸以不同方式管理 CSS 代码，它工作正常:

@media only screen and (max-width: 40em) {
    my code
    }

现在，我想要实现的是根据屏幕分辨率将一段 html 代码放置在不同的位置。

例如，我的 div id="news_box"将放置在桌面上的标题包装器中。而在手机上，div id="news_box"将放置在页脚包装器中。

我怎样才能做到这一点？

非常感谢，

Answer 1

据我所知，没有办法以那种方式使用 CSS 来操作 DOM，但是您可以使用 JavaScript hack:

window.addEventListener('load', function(){
    var width = this.innerWidth;
    if(width < 400) {
        document.getElementById('footer-id').appendChild(document.getElementById('news_box'));
    }
});

或者可以为其分配一个类并让该元素出现在页眉和页脚中(尽管您可能想要更改 ID):

#footer-id .news_box {
    display: none;
}
#header-id .news_box {
    display: block;
}
@media only screen and (max-width: 40em) {
    #footer-id .news_box {
        display: block;
    }
    #header-id .news_box {
        display: none;
    }
}