css - 仅在使用 weebly.com 的手机/平板电脑/桌面上显示 div

Question

我只想在移动设备上显示一个在桌面上看不到的特定 div，反之亦然。此代码应该可以工作，但我似乎无法使用 weebly.com 让此代码工作

<style>

@media all and (max-width: 959px) {

    .content .one{display:block;}
    .content .two{display:none;}
    .content .three{display:none;}

}

@media all and (max-width: 720px) {

    .content .one{display:none;}
    .content .two{display:block;}
    .content .three{display:none;}

}

@media all and (max-width: 479px) {

    .content .one{display:none;}
    .content .two{display:none;}
    .content .three{display:block;}

}
</style>

<div class="content">
    <div class="one">this is the content for desktop</div>
    <div class="two">this is the content for tablet</div>
    <div class="three">this is the content for mobile</div>
</div>

Answer 1

你的代码完全没问题。在 JsFiddle 上尝试了同样的方法。有用

调整窗口大小并针对各种分辨率进行测试。

@media all and (max-width: 959px) {

    .content .one{display:block;}
    .content .two{display:none;}
    .content .three{display:none;}

}

@media all and (max-width: 720px) {

    .content .one{display:none;}
    .content .two{display:block;}
    .content .three{display:none;}

}

@media all and (max-width: 479px) {

    .content .one{display:none;}
    .content .two{display:none;}
    .content .three{display:block;}

}

<div class="content">
    <div class="one">this is the content for desktop</div>
    <div class="two">this is the content for tablet</div>
    <div class="three">this is the content for mobile</div>
</div>