在 CSS 中使用媒体查询

CSS 中的媒体查询改变了网站的整体功能和响应能力。它们有点像“if”语句，例如，如果视口宽度是这个大小或更低，那么就改变它。媒体查询主要用于使网站根据视口的宽度改变样式。这样，您在计算机上编写的网站现在在任何其他平台或设备上看起来都很好。

您如何实际添加媒体查询？其实很简单。首先，您需要转到 CSS 的底部，这非常重要，但我们很快就会找到它，然后输入 @media 以使其初始化。

媒体查询也有不同类型的选择器，例如在打印或常规屏幕上工作，或者手机处于横向而不是纵向模式。还有一种方法可以使其适用于所有设置，无论设备或方向如何。

Different Media Inputs

诸如 max-width 之类的标识符几乎总是在屏幕宽度的关键断点处或附近使用。常见示例包括 1200 像素、768 像素和 375 像素。它相当于从 PC 显示器到平板电脑再到手机。您可以在媒体括号中使用 CSS 设置或更改任何类的样式。您无法更改 HTML，因此如果您希望在屏幕变小时弹出新内容，请将其包含在显示设置为无的类中，然后将其设置为在媒体查询中阻止。

为什么要将所有媒体查询放在底部？这样一来，在您开始或多或少地使用媒体查询应用之前，您的所有 CSS 都已被阅读和应用。您不想更改媒体查询中的某些内容，但随后将其更改回来，因为它下面的 CSS 现在会覆盖媒体查询所做的任何更改。同样非常重要的是，在对视口宽度进行查询时，确保它们的顺序正确，因为一个可能一直到底部都是正确的，并且会破坏其他媒体查询。

媒体查询擅长做什么？它们有助于根据屏幕尺寸重组您的网页。充分利用它的一种方法是使用 CSS Grid 或 Flexbox，或两者兼而有之。您可以更改网格的布局，以更好地在垂直或水平方向包含更多内容，具体取决于屏幕是更小还是更大。

如果你真的想了解 CSS Grids，请查看我的文章“All About CSS Grids”。感谢您抽出宝贵的时间阅读本文并享受剩下的一天！

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/1352/53182817

标签：更改,媒体,像素,屏幕,查询,CSS
来源： https://www.cnblogs.com/amboke/p/16633265.html