媒体查询 CSS 实例——移动响应式设计的最大和最小屏幕宽度

原文： Media Query CSS Example – Max and Min Screen Width for Mobile Responsive Design

当你设计一个网站时，你的内容在所有的屏幕尺寸上看起来都很好，这一点真的很重要。

在这篇文章中，我将谈论如何使用响应式设计和媒体查询来实现这一目标。我还将提供使用最大和最小屏幕宽度的媒体查询的代码示例。

什么是响应式设计？

响应式设计是确保你的内容在所有的屏幕尺寸上看起来都很好的做法。网站中的一切，包括布局、字体和图像，都应该自动适应用户的设备。

在 21 世纪初，开发人员专注于确保他们的网站在较大的屏幕尺寸上看起来不错，如笔记本电脑和台式电脑。在今天的世界里，你必须考虑像手机、平板电脑，甚至是手表这样的设备。

响应式设计的一个重要组成部分是媒体查询。

在 CSS 中，媒体查询是用来根据浏览器的特性（包括宽度、高度或屏幕分辨率）来应用一组样式。

你可以在 freeCodeCamp 的课程页面上看到一个媒体查询的例子。

对于像台式机这样的大屏幕尺寸，我们可以在左上角看到一个搜索框。

但在移动设备上，没有搜索框，我们只有菜单选项和登录按钮。

下面是 CSS 中媒体查询的基本语法：

@media media-type (media-feature){
/*Styles go here*/
}

让我们来分析一下这个语法的含义。

@media 是 CSS 中 At-rule 的一种类型。这些规则将决定 CSS 在某些条件下的样子。

媒体类型指的是设备的媒体类别。不同的媒体类型包括 all、print、screen 和 speech。

根据文档，

除了使用 not 或 only 逻辑运算符时，媒体类型是可选的，all 类型是隐含的。

你可以选择省略媒体类型而使用这种语法。

@media (media-feature){
/*Styles go here*/
}

媒体特性指的是浏览器的特性，包括视口的高度和宽度、方向或长宽比。关于可能的媒体特性的完整列表，请访问 MDN 文档。

在这篇文章中，我们将专注于宽度媒体特性。

如果你想创建更复杂的媒体查询，那么你可以使用逻辑运算符。

让我们来看看几个例子，看看如何在 CSS 中使用媒体查询。

在第一个例子中，我们希望当设备的宽度为 600px 或以下时，背景颜色变为蓝色。

在 CSS 中，我们要为媒体查询添加一个 (max-width: 600px)，告诉计算机以屏幕宽度为 600px 及以下的设备为目标。

在媒体查询中，我们把正文的背景样式改为 background-color: #87ceeb;。

以下是完整的媒体查询：

@media (max-width: 600px) {
  body {
    background-color: #87ceeb;
  }
}

这里是 CodePen 的例子。如果你点击右上角的 Edit on CodePen，你可以在 Codepen 上测试一下。

在第二个例子中，如果设备的宽度在 600 到 768px 之间，我们想把背景颜色从蓝色改为红色。我们可以使用 and 运算符来实现这一目的。

@media (min-width: 600px) and (max-width: 768px) {
  body {
    background-color: #de3163;
  }
}

这里有完整的 CodePen 例子供你尝试。

当你测试时，你应该看到，如果屏幕宽度低于 600px 或高于 768px，背景颜色就是蓝色。

这个问题的简短答案是不。

市场上有太多的设备，不能为每个设备都写一个媒体查询。技术总是在变化，这意味着新的设备总是会出现。

更重要的是，你要为一系列的设备使用媒体查询。这篇文章列出了一些用于媒体查询的常见断点。

响应式设计是确保你的内容在所有屏幕尺寸上看起来都很好的做法。网站中的一切，包括布局、字体和图像都应该自动适应用户的设备。

在 CSS 中，媒体查询被用来根据浏览器的特性（包括宽度、高度或屏幕分辨率）来应用一组样式。

以下是 CSS 中媒体查询的基本语法：

@media media-type (media-feature){
/*Styles go here*/
}

媒体类型是可选的，除非你使用 not 或 only 逻辑运算符。如果省略了媒体类型，那么媒体查询将针对所有设备。

我希望这篇文章对你有帮助，祝你在学习 CSS 时一切顺利。