响应式布局-----媒体查询

一、medio 语法

1、设置meta标签

<meta name="viewport" content="width = device-width,initial-scale=1,maximum-scale=1,user-scaled = no">

2、media格式

@media 媒体类型 and|all|noly (媒体特征){

       选择器{
                css样式
            }
}

媒体类型

• print：用于打印机和打印预览
• screen：用于电脑屏幕，平板电脑，智能手机等
• all：用于所有媒体设备类型

常用媒体特征

• max-height：定义输出设备中的页面可见的最大高度。
• max-width：定义输出设备中的页面可见的最大宽度。
• min-device-height：定义输出设备的屏幕可见的最小高度。
• max-device-width：定义输出设备的屏幕可见的最大宽度。

二、media 的引入方法：

1、在head标签中引用

<link media="screen and (max-width:600px)" rel="stylesheet" href="example.css" />

2、在css中直接引用

@media screen and (max-width){
       选择器.{
            css样式
         }

}

@media screen and (max-width){
        选择器.{
            css样式
         }

}