2.2.18.1. 响应式布局：media query

响应式布局（responsive）的含义是，网页会根据不同的媒介，自动采用不同的 CSS 规则。它主要通过 media 命令实现。

media命令用来规定 CSS 规则生效的媒介。@media命令后面使用关键词，指定生效的条件。

@media print {
   …
}

@media screen {
   …
}

上面代码中，打印和显示屏分别使用不同的 CSS 规则。

媒介名称之前，还可以使用not和only关键字。

@media not screen {
   …
}

@media only screen {
   …
}

@media还允许使用表达式，指定 CSS 生效的条件。表达式可以放在圆括号之中。

@media (min-width: 800px) {
  p {
    font-size: 18px;
  }
}

上面代码中，media命令规定，只有在屏幕宽度大于等于800px时，p元素的大小才等于18px。

如果同时需要满足多个条件，可以使用and关键字。下面的例子是为不同的设备指定不同的背景图片。

/* default is desktop image */
.someElement { background-image: url(sunset.jpg); }

@media only screen and (max-width : 1024px) {
  .someElement { background-image: url(sunset-small.jpg); }
}

下面是另一个例子。

.component__header {
  font-size: 2rem;
  @media (min-width: 1200px) {
    font-size: 3rem
  }
}

@media only screen
  and (max-width : 603px)
  and (max-height : 966px) {
  /* Styles here */
}

2.2.18.2. 响应式布局

图片自适应各种屏幕的写法。

img {
  width: 100%;
  height: auto;
}

如果使用<img>或<picture>元素的srcset属性，上面这样的写法就够了。但是，对于普通的<img>元素，还要加上max-width: 100%;，这是为了防止图片大于容器宽度的情况。