CSS3 1 CSS3 响应式布局 1.1 媒体查询

CSS3

文章目录

CSS3
1 CSS3 响应式布局
- 1.1 媒体查询
- - 1.1.1 什么是媒体查询
  - 1.1.2 添加断点
  - 1.1.3 始终移动优先设计
  - 1.1.4 另一个断点
  - 1.1.5 典型的设备断点
  - 1.1.6 方向：人像 / 风景
  - 1.1.7 用媒体查询隐藏元素
  - 1.1.8 用媒体查询修改字体
  - 1.1.9 CSS @media 参考手册

1 CSS3 响应式布局

1.1 媒体查询

【响应式网页设计 - 媒体查询】

1.1.1 什么是媒体查询

媒体查询是 CSS3 中引入的一种 CSS 技术。

仅在满足特定条件时，它才会使用 @media 规则来引用 CSS 属性块。

【举个栗子】

如果浏览器窗口是 600px 或更小，则背景颜色为浅蓝色：

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8"><style>body {background-color: lightgreen;}@media only screen and (max-width: 600px) {body {background-color: lightblue;}}</style>
</head>
<body><p>请调整浏览器窗口的大小。如果此文档的宽度为 600 像素或更小，背景颜色为“浅蓝色”，否则为“浅绿色”。</p></body>
</html>

浏览器渲染

1.1.2 添加断点

可以添加一个断点，其中设计的某些部分在断点的每一侧会表现得有所不同。

使用媒体查询在 768px 处添加断点：

【举个栗子】

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8"><style>* {box-sizing: border-box;}.row::after {content: "";clear: both;display: block;}[class*="col-"] {float: left;padding: 15px;}html {font-family: "Lucida Sans", sans-serif;}.header {background-color: #9933cc;color: #ffffff;padding: 15px;}.menu ul {list-style-type: none;margin: 0;padding: 0;}.menu li {padding: 8px;margin-bottom: 7px;background-color: #33b5e5;color: #ffffff;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);}.menu li:hover {background-color: #0099cc;}.aside {background-color: #33b5e5;padding: 15px;color: #ffffff;text-align: center;font-size: 14px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);}.footer {background-color: #0099cc;color: #ffffff;text-align: center;font-size: 12px;padding: 15px;}/* 针对桌面： */.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width: 100%;}@media only screen and (max-width: 768px) {/* 针对手机： */[class*="col-"] {width: 100%;}}</style>
</head>
<body><div class="header"><h1>Shanghai</h1>
</div><div class="row"><div class="col-3 menu"><ul><li>交通</li><li>文化</li><li>旅游</li><li>美食</li></ul></div><div class="col-6"><h1>欢迎来到上海</h1><p>上海市，简称沪，别称申，是中华人民共和国直辖市，中国的经济、金融、贸易和航运中心，世界著名的港口城市，是中国人口第二多的城市。</p></div><div class="col-3 right"><div class="aside"><h2>历史</h2><p>最晚在新石器时代，上海地区已经有先民聚居。春秋时代，上海由吴国管辖，战国时代则是楚国领土 ...</p><h2>位置</h2><p>上海位于中国东部弧形海岸线的正中间，长江三角洲最东部，东临东海，南濒杭州湾，西与江苏、浙江两省相接 ...</p><h2>环境</h2><p>上海地处江南水乡，并位于长江入海口，亦不处于主要地震带上，因此如地震、洪水以及地质类灾害鲜有发生 ...</p></div></div>
</div><div class="footer"><p>请调整浏览器窗口的大小，以查看内容如何响应调整大小。</p>
</div></body>
</html>

浏览器渲染

1.1.3 始终移动优先设计

移动优先（Mobile First）指的是在对台式机或任何其他设备进行设计之前，优先针对移动设备进行设计（这将使页面在较小的设备上显示得更快）。

当宽度小于 768px 时，我们应该修改设计，而不是更改宽度。我们就这样进行了“移动优先”的设计：

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8"><style>* {box-sizing: border-box;}.row::after {content: "";clear: both;display: table;}[class*="col-"] {float: left;padding: 15px;}html {font-family: "Lucida Sans", sans-serif;}.header {background-color: #9933cc;color: #ffffff;padding: 15px;}.menu ul {list-style-type: none;margin: 0;padding: 0;}.menu li {padding: 8px;margin-bottom: 7px;background-color: #33b5e5;color: #ffffff;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);}.menu li:hover {background-color: #0099cc;}.aside {background-color: #33b5e5;padding: 15px;color: #ffffff;text-align: center;font-size: 14px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);}.footer {background-color: #0099cc;color: #ffffff;text-align: center;font-size: 12px;padding: 15px;}/* 针对手机： */[class*="col-"] {width: 100%;}@media only screen and (min-width: 768px) {/* For desktop: */.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width: 100%;}}</style>
</head>
<body><div class="header"><h1>上海</h1>
</div><div class="row"><div class="col-3 menu"><ul><li>交通</li><li>文化</li><li>旅游</li><li>美食</li></ul></div><div class="col-6"><h1>欢迎来到上海</h1><p>上海市，简称沪，别称申，是中华人民共和国直辖市，中国的经济、金融、贸易和航运中心，世界著名的港口城市，是中国人口第二多的城市。</p></div><div class="col-3 right"><div class="aside"><h2>历史</h2><p>最晚在新石器时代，上海地区已经有先民聚居。春秋时代，上海由吴国管辖，战国时代则是楚国领土 ...</p><h2>位置</h2><p>上海位于中国东部弧形海岸线的正中间，长江三角洲最东部，东临东海，南濒杭州湾，西与江苏、浙江两省相接 ...</p><h2>环境</h2><p>上海地处江南水乡，并位于长江入海口，亦不处于主要地震带上，因此如地震、洪水以及地质类灾害鲜有发生 ...</p></div></div>
</div><div class="footer"><p>请调整浏览器窗口的大小，来查看内容如何响应调整大小。</p>
</div></body>
</html>

1.1.4 另一个断点

可以添加任意多个断点。

在平板电脑和手机之间插入一个断点。

添加了一个媒体查询（在 600 像素），并为大于 600 像素（但小于 768 像素）的设备添加了一组新类：

请注意，两组类几乎相同，唯一的区别是名称（col- 和 col-s-）：

/* 针对手机： */
[class*="col-"] {width: 100%;
}@media only screen and (min-width: 600px) {/* 针对平板电脑： */.col-s-1 {width: 8.33%;}.col-s-2 {width: 16.66%;}.col-s-3 {width: 25%;}.col-s-4 {width: 33.33%;}.col-s-5 {width: 41.66%;}.col-s-6 {width: 50%;}.col-s-7 {width: 58.33%;}.col-s-8 {width: 66.66%;}.col-s-9 {width: 75%;}.col-s-10 {width: 83.33%;}.col-s-11 {width: 91.66%;}.col-s-12 {width: 100%;}
}@media only screen and (min-width: 768px) {/* 针对桌面： */.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width: 100%;}
}

1.1.5 典型的设备断点

高度和宽度不同的屏幕和设备不计其数，因此很难为每个设备创建精确的断点。

为了简单起见，您可以瞄准这五组：

/* 超小型设备（电话，600px 及以下） */
@media only screen and (max-width: 600px) {...} /* 小型设备（纵向平板电脑和大型手机，600 像素及以上） */
@media only screen and (min-width: 600px) {...} /* 中型设备（横向平板电脑，768 像素及以上） */
@media only screen and (min-width: 768px) {...} /* 大型设备（笔记本电脑/台式机，992px 及以上） */
@media only screen and (min-width: 992px) {...} /* 超大型设备（大型笔记本电脑和台式机，1200px 及以上） */
@media only screen and (min-width: 1200px) {...}

1.1.6 方向：人像 / 风景

媒体查询还可用于根据浏览器的方向来更改页面的布局。

您可以设置一组 CSS 属性，这些属性仅在浏览器窗口的宽度大于其高度时才适用，即所谓的“横屏”方向：

如果方向为横向模式（landscape mode），则网页背景为浅蓝色：

@media only screen and (orientation: landscape) {body {background-color: lightblue;}
}

1.1.7 用媒体查询隐藏元素

媒体查询的另一种常见用法是在不同屏幕尺寸上对元素进行隐藏：

/* 如果屏幕尺寸为 600 像素或更小，请隐藏该元素 */
@media only screen and (max-width: 600px) {div.example {display: none;}
}

1.1.8 用媒体查询修改字体

使用媒体查询来更改不同屏幕尺寸上的元素的字体大小：

/* 如果屏幕尺寸为 601px 或更大，请将 <div> 的 font-size 设置为 80px */
@media only screen and (min-width: 601px) {div.example {font-size: 80px;}
}/* 如果屏幕尺寸为 600px 或更小，请将 <div> 的 font-size 设置为 30px */
@media only screen and (max-width: 600px) {div.example {font-size: 30px;}
}

1.1.9 CSS @media 参考手册

@media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。

媒体查询可用于检查许多事情，诸如：

视口的宽度和高度
设备的宽度和高度
方向（手机或平板电脑处于横屏还是竖屏模式？）
分辨率

使用媒体查询是一种流行的技术，用于向台式机、笔记本电脑、平板电脑和手机提供定制的样式表（响应式网页设计）。

您还可以使用媒体查询来规定某些样式仅适用于打印的文档或屏幕阅读器（mediatype：print、screen 或 speech）。

https://www.w3school.com.cn/cssref/pr_mediaquery.asp