媒体查询使得我们可以根据设备特性以及一些特性范围来决定为页面赋予什么样的样式。
基本语法
@media (max-width: 1200px) {
... }
@media all (max-width: 1200px) {
... }
@media not screen (max-width: 1200px) {
... }
@media only screen (max-width: 1200px) and (min-width: 786px) {
... }
@media only screen (max-width: 1200px), (min-width: 786px) {
... }
@media only screen (max-width: 1200px), handheld and (min-width: 786px) {
... }
媒体设备
all所有设备handheld手持设备print打印机screen屏幕tv电视设备
媒体特征
大多数媒体属性可以带有min-或max-前缀，用于表达最低...或者最高...，常见特性如下：
-
aspect-ratio宽高比 -
device-aspect-ratio设备宽高比 -
device-height设备高度 -
device-width设备宽度 -
height高度 -
width宽度 -
resolution分辨率（像素密度） -
orientation方向landscape(横屏) |portrait(竖屏)
案例如下：
@media all and (orientation: portrait) {
... }
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {
... }
@media screen and (min-aspect-ratio: 1/1) {
... }
@media print and (min-resolution: 300dpi) {
... }
媒体查询形式
<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>