之前一直好奇，为什么有些网页能够随着窗口（视口）的大小改变，而变更样式,后面学习到了媒体查询 (opens new window)

它能够在你重置浏览器大小的过程中，使页面根据浏览器的宽度和高度重新渲染页面。

语法详情 (opens new window)

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

not:

not关键字不能用于否定单个功能查询，只能用于否定整个媒体查询，如果使用 not 运算符，则还必须指定媒体类型，且只会否定要应用的特定媒体查询,所以它不会应用于以逗号分隔的媒体查询列表。

only:

only关键字可防止不支持带有媒体功能的媒体查询的旧版浏览器应用给定的样式。它对现代浏览器没有影响。 如果使用 only 运算符，则还必须指定媒体类型。

, (逗号)

逗号用于将多个媒体查询合并为一个规则。 逗号分隔列表中的每个查询都与其他查询分开处理。 因此，如果列表中的任何查询为 true，则整个 media 语句均返回 true。 换句话说，列表的行为类似于逻辑或 or 运算符。

and:

and 操作符用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。

css 引入

<link rel="stylesheet" src="styles.css" media="screen and (30em <= width <= 50em )" />
<link rel="stylesheet" src="styles.css" media="screen and (50em < width)" />