媒体查询笔记

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式。

媒体类型

all   (默认值)

screen   彩色屏幕

print   打印预览

媒体属性

max-width  最大宽度

min-width   最小宽度

device-width   设备屏幕输出宽度

orientation   portrait(竖屏)/landscape(横屏)

最大宽度max-width

@media screen and (max-width:580px){
 body {
   background-color: red;
  }
}

上面表示的是：当屏幕小于或等于580px时,页面的背景颜色变为红色。

最小宽度min-width

@media screen and (min-width:580px){
 body {
   background-color: red;
  }
}

上面表示的是：当屏幕大于或等于580px时,页面的背景颜色变为红色。

多个媒体特性使用

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:red;}
}

上面表示的是：当屏幕在600px到900px之间,页面的背景颜色变为红色。

设备屏幕的输出宽度Device Width

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="IPhone.css" />

上面表示的是：“iphone.css”样式适用于最大设备宽度为480px。

not关键词

使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。

@media not print and (max-width: 1200px){样式代码}

上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

only关键词

only操作符表示仅在媒体查询匹配成功时应用指定样式。

media="only screen and (max-width:1000px)"{样式代码}

在老式浏览器中被解析为media="only"，因为没有一个叫only的设备，所以实际上老式浏览器不会应用样式。