如何使用@media为不同的屏幕设置css规则答案

【问题标题】：how to set css rules with @media for different screens如何使用@media为不同的屏幕设置css规则
【发布时间】：2014-09-08 17:59:49
【问题描述】：

我有以下 html。

<div id="menu">
 <div><span class="cr">Login</span><span class="cl">Welcome</span></div>
</div>

以及跟随css

#head{background-color:#fef}
#head div{margin:0 auto;max-width: 800px;}
@media (max-device-width: 321px){
    .cr{text-align: center;display:block;}
        /*#head div{text-align: center;margin: auto;}*/
        #head div{margin: auto;text-align: center;width: 100%;}
        .root{font-size: 100%;}
};
@media (min-device-width:321px)and(max-device-width: 801px) {
    /*.cr{width: 50%;float:right;text-align:right;}
        #head div{text-align: center;margin: auto;}*/
        .root{font-size: 128%;}
        .cr{width: 50%;float:right;text-align:right;}
};
@media (min-device-width:801px)and(max-device-width: 1025px) {
    /*.cr{width: 50%;float:right;text-align:right;}
        #head div{text-align: center;margin: auto;}*/
        .root{font-size: 196%;}
        .cr{width: 50%;float:right;text-align:right;}
};
@media (min-device-width: 1024px) {
    /*.cr{width: 50%;float:right;text-align:right;}
        #head div{text-align: center;margin: auto;}*/
        .root{font-size: 256%;}
        .cr{width: 50%;float:right;text-align:right;}
};

我只是想为大屏幕设置两列布局，为小屏幕设置一列布局，但它似乎不起作用或我做错了什么，css 仅适用于移动设备（台式机的不同 css 文件），我用opera手机模拟器测试了一下。
提前致谢。

【问题讨论】：

标签： html css mobile opera

【解决方案1】：

使用最大宽度：@media screen and (max-width:800px)。查看这个工作示例JS Fiddle

【讨论】：

这个提示有帮助吗？ stackoverflow.com/questions/9271128/…
不，我什至用谷歌浏览器移动模拟器测试过，结果一样，浏览器似乎没有找到查询，我做错了吗？
老兄，我发现了问题！这太荒谬了！您可以查看我的答案，非常感谢 JS Fiddle，以某种方式提供了帮助：D

【解决方案2】：

哇！什么……问题！由于; 在@media 右括号之后它不起作用！
刚刚删除了;s，它就像魅力一样工作！
我真的没想到！

@media (max-width:800px) and (min-width:320px){
        .root{font-size: 128%;}
        .cr{width: 50%;float:right;text-align:right;}
        #head div{margin:0 auto;max-width: 800px;text-align: left;}
}
@media (max-width:1280px)and (min-width:800px){
        .root{font-size: 196%;}
        .cr{width: 50%;float:right;text-align:right;}
        #head div{margin:0 auto;max-width: 800px;text-align: left;}
}
@media (max-width: 1920px) and (min-width:1280px) {
        .root{font-size: 256%;}
        .cr{width: 50%;float:right;text-align:right;}
        #head div{margin:0 auto;max-width: 800px;text-align: left;}
}
@media (max-width: 3840px) and (min-width:1920px) {
        .root{font-size: 512%;}
        .cr{width: 50%;float:right;text-align:right;}
        #head div{margin:0 auto;max-width: 800px;text-align: left;}
}

【讨论】：