[143-144]_媒体查询简介（响应式设计）

最新推荐文章于 2023-08-23 17:31:05 发布

「已注销」

最新推荐文章于 2023-08-23 17:31:05 发布

阅读量160

点赞数

分类专栏： HTML CSS 基础文章标签： css

本文链接：https://blog.csdn.net/gty204625782/article/details/120008604

版权

样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化，一般比较常用的断点如下：

注意：对于max-width和min-width值相等的，在css中，谁写后边谁就能抢占闭区间

媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为 true 或 false。

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

如果指定的媒体类型与正在显示文档的设备类型匹配，并且媒体查询中的所有表达式均为 true，则查询结果为 true。当媒体查询为 true 时，将应用相应的样式表或样式规则，并遵循正常的级联规则。

除非使用 not 或 only 运算符，否则媒体类型是可选的，且隐含 all 类型。（only的使用主要是为了兼容一些老版本浏览器）

还可以针对不同的媒体使用不同的样式表：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

使用媒体查询的一种方法是在样式表内有一个备用的 CSS 部分。

下面的例子在视口宽度为 480 像素或更宽时将背景颜色更改为浅绿色（如果视口小于 480 像素，则背景颜色会是粉色）：

<!DOCTYPE html>
<html>
<head

关注

专栏目录