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

并不是只有CSS3才开始支持Media的用法，早在CSS2开始就已经支持Media，当时具体用法就是在HTML页面的<head>标签中插入如下代码：

例如：我们想知道现在的移动设备是否是纵向放置的显示屏，就是这样写：

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" ;href="style.css">
页面宽度小于960px时执行指定的样式表文件：
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="small.css">
应该很多人会问，既然CSS2可以实现CSS的这个效果为何不用这个方法呢，但是上面这个方法，最大的弊端是会增加页面http的请求次数，增加了页面负担，我们用CSS3把样式都写在一个文件里面才是最佳的方法。

三、再次回到CSS3@media方法

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

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

@media screen and (max-device-width:960px){
    body{background:red;}
}
 当尺寸大于960px时的代码：
@media screen and (min-width:960px){ 
    body{background:orange;}
}
还可以混合使用上面的两种用法：
@media screen and (min-width:960px) and (max-width:1200px){
    body{background:yellow;}
}
 上面的这段代码的意思就是当页面宽度大于960px小于1200px的时候执行里面的css

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

/*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; 
}
当然，既然是CSS3就肯定有浏览器兼容性问题，目前主流浏览器都支持：（IE8-、IE9+、Chrome 5+、Opera 10+、Firefox 3.6+、Safari 4+）！
就先到这里吧，毕竟博主知道的也不是很多（如有其余需要补充的欢迎指出~），小伙伴们看到这里如有帮助，也分享给需要的小伙伴吧~
赏

技术成就梦想，细节成就品质。