响应式布局

媒体查询的书写模式
@media 媒体类型 and （媒体特性）{
你的css样式
}
媒体类型：screen（屏幕）
print （打印机）
handheld（手持设备）
all （通用）
设置@media媒体查询之前，首先要设置viewport

width=device-width:宽度等于当前设备宽度
initial-scale：初始缩放比例（默认1.0）
minimum-scale：允许用户缩放的最小比例（默认1.0）
maximum-scale：允许用户缩放到的最大比例（默认1.0）
user-scalable：用户是否能手动进行缩放（默认为no）

最大宽度640px最小宽度100px

width：浏览器可视宽度
height：浏览器可视高度
device-width：设备屏幕宽度
device-height：设备屏幕高度
orientation：检测设备是横屏landscape还是竖屏portrait
案例：http://59.110.5.236:9999/index.html