@media (max-width: 600px) {
@media (min-width: 601px) {
最后，重构 CSS。在 600px 的 max-width 媒体查询内，添加仅适用于小屏幕的 CSS。在 601px 的 min-width 媒体查询内，添加适用于大屏设备的 CSS。
视需要选择次要断点
除了在布局发生重大变化时选择主要断点之外，针对细微变化进行调整也很有帮助。例如，在主要断点之间，调整元素的外边距或内边距，或增大字体大小，有助于在布局中使其看起来更自然。
此示例遵循与上一个示例相同的模式，首先优化较小的屏幕布局。首先，当视口宽度大于 360px 时，放大字体。之后，如果有足够的空间，您可以将最高温度和最低温度分开，使它们位于同一行，并将天气图标放大。
@media (min-width: 360px) {
body {
font-size: 1.0em;
@media (min-width: 500px) {
.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
.seven-day-fc .seven-day-temp {
margin-left: 5%;
.seven-day-fc .icon {
width: 64px;
height: 64px;
对于大屏幕，我们建议限制预报面板的最大宽度，以免其占用整个屏幕宽度。
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
在 CodePen 上查看 web.dev (@web-dot-dev) 的
“自适应基础知识”天气预报演示。
优化文字以便阅读
根据传统的可读性理论，理想的列应每行包含 70 到 80 个字符（大约 8 到 10 个英语单词）。每当文本块的宽度超过大约 10 个字时，不妨考虑添加一个断点。
在此示例中，1em 处的 Roboto 字体在较小的屏幕上每行显示 10 个字，但较大的屏幕需要断点。在这种情况下，如果浏览器宽度大于 575px，理想的内容宽度为 550px。
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
避免隐藏内容 (:#avoid-hiding-content)
在选择要根据屏幕尺寸隐藏或显示的内容时，请务必谨慎。
请勿仅仅因为内容无法在屏幕上显示而将其隐藏。屏幕尺寸无法预测用户可能希望看到的内容。例如，对于春季过敏症患者来说，从天气预报中移除花粉数可能会是一个严重问题，因为他们需要这些信息来决定是否可以外出。
设置媒体查询断点后，请检查它们对您网站的外观有何影响。您可以调整浏览器窗口大小以触发断点，但 Chrome 开发者工具内置了一项功能，可显示页面在不同断点下的显示效果。
如未另行说明，那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可，并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情，请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC)：2019-02-12。
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC)：2019-02-12。"],[],[]]
