响应式布局基本实现Media Query（媒介查询）

1.Media Query的使用方法

首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

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

参数解释：

• width = device-width：宽度等于当前设备的宽度
• initial-scale：初始的缩放比例（默认设置为1.0）
• minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
• maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
• user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

使用：

@media 设备类型 and （设备特性）{样式代码}

2.Ｍedia Query的设备类型（10种）

• all：所有设备
• screen：电脑显示器
• print：打印用纸或打印预览视图
• handled：便携设备
• tv：电视机类型的设备
• …

<