判断屏幕大小使用对应的CSS

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>  
    <style type="text/css">  
    /* 媒体查询的基础语法 */  
    /*  设备的屏幕尺寸 大于 等于 480的时候 使用 括号内的样式 
        也遵循  层叠样式表的  
        为了避免样式覆盖 
            可以 修改 先后顺序 
      */  
     /* 写的时候注意空格 */  
        @media screen and (min-width: 300px) {  /* 300--480时,会使用该设置 */  
                body {  
                    background-color: skyblue;  
                }  
        }  
  
        @media screen and (min-width: 480px) {  /* 大于480时,会覆盖掉上面的设置 */  
                body {  
                    background-color: red;  
                }  
        }  
  
    </style>  
</head>  
<body>  
      
</body>  
</html>

留下评论