如今的屏幕分辨率，小至320px(iPhone)，大到2560px甚至更高(大显示器)，变化范围极大。我们该如何使用css实现适应不同分辨率呢？下面我们来看一下css适应不同分辨率的方法。
纯CSS实现PC浏览器(显示屏幕)或移动端浏览器宽度样式的自适应。将用到@media样式进行判断。
一般我们设计网页的时候PC端宽度都在900-1400像素之间，移动端宽度在320-640像素之间，用@media样式选择可以让PC端和移动端自适应。
css样式选择器写法如下：@media screen and (判断属性){
css样式
}
示例：
.main{height:400px;border:1px solid #eee}
@media screen and (min-width:1201px){
.main{width:1200px}
}/*设置在屏幕(浏览器)不小于1201px时，main的宽度显示宽度为1200px*/
@media screen and (max-width:1200px){
.main{width:900px}
}/*设置在屏幕(浏览器)不大于1200px时，main的宽度显示宽度为900px*/
注意css代码的先后顺序，必须尺寸由大到小。这里还要提到书写格式也要按照上面的这样写，全部用英文字符，也可写成压缩的样式：@media screen and (max-width:1200px){.main{width:900px}} 结果是有效。
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。