一.定义

媒体查询能使页面在不同在终端设备下达到不同的效果

媒体查询会根据设备的大小自动识别加载不同的样式

设置meta标签

使用设备的宽度作为视图宽度并禁止初始的缩放。在 标签里 加入这个meta标签。

参数解释

1 width = device-width 宽度等于当前设备的宽度

2 initial-scale 初始的缩放比例（默认设置为1.0）

3 maximum-scale 允许用户缩放到的最大比例（默认设置为1.0）

4 user-scalable 用户是否可以手动缩放（默认设置为no）

媒体查询语法：

@media screen and (max-width: 768px) {
 /* 设备小于768px加载样式 */
    body{
        background-color: red;
   }
}
@media screen and (max-width: 992px) and
(min-width: 768px) {
     /* 设备小于768px但小于992px加载样式 */
     body{
     background-color: pink;
     }
}
@media screen and (min-width: 992px) {
 /* 设备大于992px加载样式 */
    body{
   background-color: green;
   }
}

二.实例

    
    
    
    
    


    
媒体查询展示效果：手机显示“哈哈哈”，平板显示“嘿嘿嘿”，电脑显示“哈哈哈 嘿嘿嘿”
    

    
哈哈哈
    
嘿嘿嘿