2、从web标准的设计来讲，主张css样式和html结构分离，建议使用外部文件或内联样式。
W3C文档这样描述的：The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
翻译过来就是：only是为了在不支持媒体查询的浏览器中隐藏样式表，浏览器处理以only开头的关键词时将会忽略only。
@media only screen and (min-width:xxx) and (max-width:xxx) 与 @media screen and (min-width:xxx) and (max-width:xxx) 在支持媒体查询的浏览器中其实是一模一样的，没有任何区别，因为only将被忽略。但是在不支持媒体查询的浏览器中由于没有only这个媒体类型，因此会直接忽略这条媒体查询。在不支持媒体查询的浏览器中，如果不加only，@media screen and (min-width:xxx) and (max-width:xxx)将会被解析为@media screen，明显与期望不一致。因此通过加一个浏览器不认识的媒体类型only则浏览器将会直接忽略这条媒体查询。
media="only screen and (min-width: 401px) and (max-width: 600px)"/* 在支持媒体查询的浏览器中等于*/
media="screen and (min-width: 401px) and (max-width: 600px)"
/*在不支持媒体查询的浏览器中解析到带only的媒体查询时，会将only视为媒体类型。（由于没有only这种媒体类型，因此将不会被应用）*/
media="only"
/*如果不带only，在不支持媒体查询的浏览器中*/
media="screen and (min-width: 401px) and (max-width: 600px)"
/*将被解析为screen，将会被应用到屏幕类型设备上*/
media="screen"
响应式布局，说直白点就是一个网站能够兼容多个终端，可以按不同的分辨率显示不同的状态。而实现这个就要用到css3的Media Queries（媒介查询）。这个功能非常的强大，但是有优点的同时，缺点也是会存在的。那就是兼容各种设备工作量大，效率低下，加载时间长等。但是学起来很容易，看完下面的代码你就会了。
.page{width:960px
height:1000px
margin:0 auto
background:#CCC
}
/* 设备最大宽度960px */
@media screen and (max-width: 960px) {
.page{
width:100%
background:#69F
}
}
/* 宽度大于480px且小于768px */
@media screen and (min-width: 480px) and (max-width:768px) {
.page{
width:100%
background:#F00
}
}
/* 设备最大宽度480px */
@media screen and (max-width:480px){
.page{
width:100%
background:#00FF00
}
}
这样就可以在不同的分辨率下采取不同的样式了。
另外还有一点，如果是移动端开发，一定要在头部加上以下代码。
<meta name="viewport" content="width=device-width initial-scale=1.0">
