CSS @Media 媒体查询基础

CSS @Media 媒体查询基础

为什么需要媒体查询

某些样式只想在特定的设备或者特定的情况下生效.
常常用于响应式布局.

媒体查询语法

具体的说明见: css3-mediaqueries

@media media-type and (media-feature-rule) {
   
  /* CSS rules go here */
}

它由以下部分组成：

• 媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）；
• 媒体表达式，是一个被包含的 CSS 生效所需的规则或者测试；
• CSS 规则，会在测试通过且媒体类型正确的时候应用。

媒体类型

• all
• print
• screen
• speech 等其它在https://drafts.csswg.org/mediaqueries-4/#media-type中将要废弃的类型

Deprecates all media types except for screen, print, speech, and all.

@media screen {
   
  body {
   
    font-size: 20px;
    color: red;
  }
}

媒体表达式