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

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

Answer 2

WOW！什么......问题！在;结束括号后@media，它无法正常工作！刚删除了;，它就像魅力一样！我真的没想到！

@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;}
}

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

2 个答案: