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

我有下面的html

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

我只是希望大屏幕有两列布局，小屏幕有一列布局，但它似乎不起作用，或者我做错了什么，css只适用于移动设备（台式机有不同的css文件），我用opera mobile emulator对其进行了测试。

---

提前感谢。

使用最大宽度：

@媒体屏幕和（最大宽度：800px）

。检查这个工作示例

哇！什么是。。。问题由于

，它无法工作在
@媒体之后
结束括号

刚刚删除了
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;}
}

这个提示有用吗？不，伙计，我甚至用谷歌chrome手机模拟器测试了它，结果是一样的，似乎浏览器没有找到查询，我做错了吗？伙计，我发现了问题！这太可笑了！你可以检查我的答案，非常感谢你的JS小提琴，不知何故帮助了我：D
@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;}
}