响应式设计——媒体查询(media queries)

1什么是媒体查询

@media一个可以让你针对不同的媒体类型定义不同样式的方法。就是你可以针对屏幕尺寸的不同设置不同的样式。

2兼容@media的浏览器

现代浏览器、ie9

3@media的语法

1.<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css"

<link rel="stylesheet" media="(max-width:960px)" href="mobile.css">

2.@media mediatype and|not|only (media feature) {
    CSS-Code;
}

@media (max-width:960px){
    ...
}

 

 以上两种是媒体查询的简单应用，意思是当宽度小于960px时应用mobile.css或大括号里的样式。