基于浏览器大小使用ONLY css显示/隐藏div？

问题描述

我试图得到一些divs基于浏览器大小显示/隐藏，只使用css媒体查询...但似乎没有什么工作...请帮助，如果你可以，让我知道我是什么错误...提前感谢！

I am a trying to get some divs to show/hide based on browser size, using only css media queries... but nothing seems to be working... please help if you can and let me know what i'm doing wrong... thanks in advance!

继续我的css ..

heres my css..

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

    .content .700{display:block;}
    .content .490{display:none;}
    .content .290{display:none;}

}

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

    .content .700{display:none;}
    .content .490{display:block;}
    .content .290{display:none;}

}

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

    .content .700{display:none;}
    .content .490{display:none;}
    .content .290{display:block;}

}

这里是我的html

<div class="content">
    <div class="700">this is the content for desktop</div>
    <div class="490">this is the content for tablet</div>
    <div class="290">this is the content for mobile</div>
</div>

推荐答案

类名不能以数字开头。更改为x700，x490，x290和它应该工作

class name can't start with the digit. change it to e.g. x700,x490,x290 and it should work

这篇关于基于浏览器大小使用ONLY css显示/隐藏div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！