媒体查询 - CSS

CSS媒体查询是一种用于在不同设备上呈现不同样式的技术。通过媒体查询，您可以控制在哪些设备或屏幕尺寸上应用某种样式。在响应式设计中，媒体查询是必不可少的一部分。

语法

@media screen and (max-width: 600px) {
  /* 样式 */
}

• @media：表示这是一个媒体查询。
• screen：表示样式将应用于屏幕。
• and：用于将多个条件组合在一起。
• (max-width: 600px)：表示屏幕宽度不超过600像素。

常见媒体类型

screen

屏幕。在计算机显示器、平板电脑、智能手机等设备上显示页面内容时应使用。

print

打印。在打印页面时应使用。

speech

语音/屏幕阅读器。在使用语音/屏幕阅读器时应使用。

常用条件

width

屏幕宽度。

@media screen and (max-width: 600px) {
    /* 当屏幕宽度小于等于600px时应用该样式 */
}

height

屏幕高度。

@media screen and (max-height: 600px) {
    /* 当屏幕高度小于等于600px时应用该样式 */
}

orientation

屏幕方向。

@media screen and (orientation: portrait) {
    /* 当屏幕为纵向时应用该样式 */
}

@media screen and (orientation: landscape) {
    /* 当屏幕为横向时应用该样式 */
}

窗口和视口

CSS中还有一些特殊的单位，用于描述屏幕或视口的大小。它们分别是窗口宽度（vw）、窗口高度（vh）、视口宽度（vmin）和视口高度（vmax）。

其中，

• 1vw表示屏幕宽度的1%；
• 1vh表示屏幕高度的1%；
• 1vmin表示屏幕宽度和高度中较小的那个的1%；
• 1vmax表示屏幕宽度和高度中较大的那个的1%。

@media screen and (min-width: 40em) {
    font-size: 1.1vw;
}

@media screen and (min-width: 60em) {
    font-size: 1.2vw;
}

这个例子中，使用了窗口宽度（vw）作为字体大小的单位，当屏幕宽度为40em及以上时，字体大小为屏幕宽度的1.1%；当屏幕宽度为60em及以上时，字体大小为屏幕宽度的1.2%。

结论

通过CSS媒体查询，我们可以轻松地为不同的设备设置不同的样式。这为响应式设计提供了极大的便利性。掌握媒体查询的使用方法和常见的条件是非常重要的。