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

Question

我试图根据浏览器大小显示/隐藏一些div,只使用css媒体查询...但似乎没有任何工作......请帮助,如果可以,让我知道我做错了什么. .. 提前致谢!

继承人我的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>

Answer 1

类名不能以数字开头.将它更改为例如x700,x490,x290,它应该工作

Answer 2

class name 不能成为一个数字,不能从一个数字开始在CSS,这里我改变了类名其工作的好

http://jsfiddle.net/RtTsy/