响应式布局 媒体查询

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
首先这句代码在移动端开发是基本会出现的，它意思就是：整个网站的宽度让它默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。基本所有常用的浏览器都能设置这句话，IE9也是可以的。比较老的IE6、7和8就需要写另外的兼容。

• width - viewport的宽度 height - viewport的高度
• initial-scale - 初始的缩放比例
• minimum-scale - 允许用户缩放到的最小比例
• maximum-scale - 允许用户缩放到的最大比例
• user-scalable - 用户是否可以手动缩放

媒体查询

<link href="css/test.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/test1.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/test2.css" rel="stylesheet" type="text/css" media="print" />

引入样式都有一个共同的属性media，media就是用来指定特定的媒体类型
如屏幕screen和打印print的样式表，当然还有其他的，比如说TV,handheld等，其中all表示的是支持所有媒体介质

and是一个关键词，还有not,only,all

<!--not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备-->
<link rel="stylesheet" media="not screen and (max-width: 1200px)" href="testTv.css" type="text/css" />

only关键字意思是用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="testOnly.css" type="text/css" />

media中如果没有明确指定类型，那么其默认为all
<link rel="stylesheet" media="(min-width: 481px) and (max-width: 900px)" href="test.css" type="text/css" />
上面这句没有media属性所以默认是all