使用@media实现页面布局的自适应

现如今，显示器的屏幕分辨率越来越向大去发展，而手机等移动设备终端的分辨率却大不到哪里去。越来越多的网站，开始让自己的页面自适合各种分辨率，在小分辨率下显示基本的内容，在大分辨率下显示全部功能，甚至是分多等级的多版本。对于刚入手前端不久的小白来说，也经常会为不同分辨率设备或不同窗口大小下布局错位而头疼，这里就可以利用@media screen从而实现网页布局的自适应。

现在有两种方式，一种是直接在link中判断设备的尺寸，然后引用不同的css文件；另一种即是直接写在写样式时加上自适应写法。

一、首先是<meta>标签

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

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

二、回顾一下CSS2 @media用法（<head>标签中引入）

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" ;href="style.css">

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="small.css">

三、再次回到CSS3@media方法

上面大概讲了下CSS2的媒体查询用法，现在我们重新回到CSS3的媒体查询。

首先我们来实现等于960px尺寸的代码（以下代码需要写在style标签或者css文件中）：

@media screen and (max-device-width:960px){
    body{background:red;}
}

@media screen and (min-width:960px){ 
    body{background:orange;}
}

@media screen and (min-width:960px) and (max-width:1200px){
    body{background:yellow;}
}

四、几种常用的屏幕宽度设定

/*1280分辨率以上（大于1200px）*/
@media screen and (min-width: 1200px) { 
    css-code;
}
/*960 - 1199分辨率以内*/
@media screen and(min-width: 960px) and (max-width: 1199px) {
    css-code; 
}
/*768 - 959分辨率以内*/
@media screen and(min-width: 768px) and (max-width: 959px) {
    css-code; 
}
/*480 - 767分辨率以内*/
@media screen and(min-width: 480px) and (max-width: 767px) {
    css-code; 
}
/*479分辨率以下（小于479px）*/
@media screen and (max-width: 479px) {
    css-code; 
}