Question

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

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

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

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

我怎么能实现这个目标？

非常感谢，

Answer 1

通过这种方式，您可以完成不同的分辨率。您必须为每个不同的“news_box”更改值。例如对于台式机，您有一个浮动：左侧框，它不会出现在手机的css部分中例如：

    /* Tablets */
@media only screen and (min-width: 760px) {
    #news_box { max-width: 760px }
…
}

/* midle screens */
@media only screen and (min-width: 980px) {
    #news_box { max-width: 980px; float:left; margin: 0 auto; }
}

/* big screens */
@media only screen and (min-width: 1280px) {
    #news_box { max-width: 1280px; float:left; margin: 0 auto; }
…
}

Answer 2

据我所知，没有办法以这种方式使用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;
    }
}

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

2 个答案: