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

Question

我有以下 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 手机模拟器测试了一下。
提前致谢。

Answer 1

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