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上尝试过同样的事情。It Works

调整窗口大小并测试它以获得各种分辨率。

＆＃13;

@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;}

}

＆＃13;

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

＆＃13;

使用weebly.com仅在移动设备/平板电脑/桌面上显示div

1 个答案: