@media [type] and [condition] … not [condition] {
    …
}
@media [condition] and/or/not [condition] … {
    …
}

其中：

type = "all" | "print" | "screen" | "speech"
condition = equality | comparison
equality = name ":" value
comparison = name ("<"|">")? "="? value
name = <CSS property name>
value = <CSS property value>

用媒体查询设置font-size实现适配，不过是老方法了，不算太好。

@media (max-width: 600px) { .facet_sidebar { display: none; } }

@media screen and (min-wdith: 1200px) {
body {background: red}
}
@media screen and (max-wdith: 1199px) and (min-wdith: 666px) {
body {background: fuck}
}

//根据像素比来使用 2x图 3x图
bg_image($star)
background-image:url('../images/stars/'+$star+'@2x.png')
@media only screen and (-webkit-device-pixel-ratio:3 )
background-image:url('../images/stars/'+$star+'@3x.png')

在做 responsive 开发的时候有用到过 media query 来进行不同分辨率下适配。
在使用 bootstrap 栅格布局时，对于栅格范围外的情况就可能会需要微调。
平时对于屏幕大小的 media query 使用的频率最高。

@media(max-width: 768px){}
@media(min-width: 960px){}
@media(min-width: 768px) and (max-width: 960px){}

@media print { ... }