目前,我根据使用的屏幕大小来不同地管理CSS代码,并且效果很好:

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


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

例如,我的div id =“ news_box”将放置在桌面上的标头包装中。而在手机上,div id =“ news_box”将放置在页脚包装中。

我该如何实现?

非常感谢,

最佳答案

据我所知,没有办法使用DOM来操纵CSS,但是您可以使用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;
    }
}

09-11 05:09
查看更多