css 响应式布局（总结）

（1）根据@media 的屏幕宽度（max-width）来查看（转）

<!-- The 1140px Grid --> 
<link rel="stylesheet" href="css/1140.css" type="text/css" media="screen" /> 

<!--[if lte IE 9]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
<![endif]--> 

<!-- Make minor type adjustments for 1024 monitors --> 
<link rel="stylesheet" href="css/smallerscreen.css" media="only screen and (max-width: 1023px)" /> 

<!-- Resets grid for mobile --> 
<link rel="stylesheet" href="css/mobile.css" media="handheld, only screen and (max-width: 767px)" /> 

或者：

@media 1240MinMedia, only screen and (min-width: 1241px) {
　　.bgcolor{
　　　　background:gray;
　　}
}

@media 1240Media, only screen and (max-width: 1240px) {
　　.bgcolor{
　　　　background:red;
　　}
}
@media 767Media, only screen and (max-width: 767px) {
　　.bgcolor{
　　　　background:blue;
　　}
}
@media 480Media, only screen and (max-width: 480px) {
　　.bgcolor{
　　　　　　background:#ccc;
　　}
}

屏幕宽度图例