Media Query CSS Min and Max

在本文中，我们将讨论媒体查询 CSS 的 min 和 max。让我们先了解一下媒体查询，然后再理解 min 和 max。

媒体查询

在 CSS 中，媒体查询是一种使用 @media 规则在满足特定条件时添加一个 CSS 属性块的方法。媒体查询用于构建响应式网页，这意味着网页的外观在一个系统中与另一个系统中会根据屏幕尺寸而有所不同，因为屏幕可能是笔记本电脑、平板电脑、台式机和手机的屏幕。

断点定义了内容需要变形的位置。当设备的宽度与断点匹配时，内容就会变形。

语法

“not”、“only” 和 “and” 是关键字。“not” 关键字用于反转媒体查询，“only” 关键字用于阻止旧版浏览器在无法理解媒体查询时对其进行错误解读。“and” 关键字用于组合媒体类型和表达式。媒体查询包含一个媒体类型，并具有一个或多个根据条件变为 true 或 false 的表达式。媒体类型的值可以是 “all”、“print” 和 “screen”。“all” 用于所有媒体类型设备。“print” 用于打印预览模式。“screen” 用于平板电脑、笔记本电脑、台式机和智能手机的屏幕。

当媒体表达式与条件匹配时，媒体查询的结果为 true，并且内容会应用更改。当媒体表达式与条件不匹配时，媒体查询的结果为 false，内容保持不变。

媒体查询演示

让我们通过一个例子来理解媒体查询。

代码

输出

当打开全尺寸屏幕时，背景颜色为浅蓝色，文本颜色为深蓝色。

当最大宽度为 850px 时，背景颜色和文本颜色会有所不同，如下所示

当最大宽度为 550px 时，背景颜色和文本颜色会有所不同，如下所示

Min-Width

它用于指定 HTML 元素的最小宽度。

语法

min-width 是一个 CSS 属性，长度是其值，单位可以是 px, cm 等。

Max-Width

它用于定义 HTML 元素的最大宽度。

语法

max-width 是一个 CSS 属性，长度是其值，单位可以是 px, cm 等。

Min-Height

它用于描述 HTML 元素的最小高度。

语法

min-height 是一个 CSS 属性，长度是其值，单位可以是 px, cm 等。

Max-Height

它用于指定 HTML 元素的最大高度。

语法

max-height 是一个 CSS 属性，长度是其值，单位可以是 px, cm 等。

我们将利用 min-width、min-height、max-width 和 max-height 来创建一个响应式网页。

媒体查询 Min-width、Min-height、Max-width 和 Max-height 的示例

我们将通过示例来理解媒体查询的 min-width 和 max-width。

插图 1

在这个演示中，我们将使用 min-width 和 max-width。我们将添加电子邮件链接，当屏幕尺寸改变时，它们的外观会发生变化。

代码

输出

当 min-width 为 650px，max-width 为 900px 时，输出如下

当 min-width 为 901px 时，输出如下

否则，输出将如下所示

插图 2

在此演示中，我们将构建一个列表，并使用 min-width 和 max-width 在屏幕尺寸改变时更改列表的字体大小。

代码

输出

当 min-width 为 550px 时，列表的 font-size 变为 24px。

当 max-width 为 850px 时，列表的 font-size 变为 16px。

插图 3

当屏幕尺寸改变时，我们将利用 min-height 和 max-height 来改变网页的背景颜色。

代码

输出

当 min-height 为 850px 时，输出如下

当 max-height 为 650px 时，输出如下

插图 4

在这个示例中，我们将添加一张图片，并利用 min-height 和 max-height 在屏幕尺寸改变时更改图片的大小。

代码

输出

当 min-height 为 500px 时，图片的宽度设置为 600px，高度设置为 300px；输出如下所示

当 max-height 为 700px 时，图片的宽度设置为 450px，高度设置为 250px；输出如下所示

插图 5

在此示例中，我们将构建一个表格，并利用 min-width 和 max-width 在屏幕尺寸改变时更改表格的文本颜色。

代码

输出

当 min-width 为 550px 时，表格中的文本颜色设置为蓝色，输出如下所示

当 max-width 为 1400px 时，表格中的文本颜色设置为蓝紫色，输出如下所示

插图 6

在此示例中，我们将在表单中构建一个提交按钮，并利用 min-width 和 max-width 在屏幕调整大小时更改其大小。

代码

输出

当 max-width 为 1200px 时，我们可以在下面的输出中看到按钮的大小

当 min-width 为 750px 时，我们可以在下面的输出中看到按钮的大小

插图 7

在此示例中，我们将构建一个网格布局，并利用 min-width 和 max-width 在屏幕调整大小时更改其外观。

代码

输出

当 min-width 为 650px 时，grid-template-columns CSS 属性设置为显示两列，输出如下所示

当 max-width 为 1350px 时，grid-template-columns CSS 属性设置为显示一列，输出如下所示

浏览器支持

以下是支持媒体查询的浏览器

• 谷歌浏览器
• Opera
• Microsoft Edge
• Safari
• 火狐

结论

在本文中，我们已经了解了媒体查询 CSS 的 min 和 max。我们通过演示理解了 min-width、min-height、max-width 和 max-height。