媒体在CSS查询无法为不同宽度

Question

我学习的moment.I媒体查询工作我想给不同宽度的股利按照设备width.This是CSS我做

.cont 
{ 
    margin:auto; 
    width:1200px; 
    background-color:maroon; 
    height:80px; 

} 

@media all and (max-width:480px) 
{ 
    .cont{ width:400px; background-color:yellow; } 
} 

@media all and (max-width:768px) 
{ 
    .cont{ width:700px; background-color:pink; } 
} 

我已经包括了meta标签以及

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

这里的问题是，媒体查询不会。在480和分辨率较低它仍然显示的max-width:768px背景颜色，即粉红颜色max-width:480工作。
如果我保留max-width:480px查询max-width:768px以下480px将工作，768px不会。我如何使两个工作？

Answer 1

添加一个最小宽度为768@media查询

演示 - http://jsfiddle.net/41x65u8d/

@media only screen and (max-width : 320px) { 
    .cont { 
     background:blue; 
    } 
} 
@media only screen and (min-width : 321px) and (max-width : 768px) { 
    .cont { 
     background:pink; 
    } 
}