20

我正在尝试根据浏览器大小显示/隐藏一些 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>
4

2 回答 2

22

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

于 2013-07-28T01:08:23.770 回答
6

class name不能是数字，也不能以 CSS 中的数字开头。这是一个示例，我更改了类名并且效果很好

http://jsfiddle.net/RtTsy/

于 2013-07-28T01:09:17.037 回答