如何在 HTML 中以移动优先的方式使用媒体查询?
构建响应式网页设计是每个开发者都必须掌握的技能，并且知道如何构建一个完全响应式、无 NUG 的网站。该网站在不同屏幕宽度的设备上呈现不同的显示效果，并且在不同设备上打开时不会出现奇怪的显示或溢出。从方法到构建，直到设计完成且没有错误和调整，了解构建移动优先设计的所有知识至关重要。
响应式网站必须拥有良好的用户体验、用户界面和设计，适用于所有设备，并且内容相同。要构建完全响应式的网站，您可以使用 CSS 媒体查询。媒体查询允许您为网页上的每个元素编写不同的 CSS，以适应不同的屏幕尺寸，从而在不同设备上显示相同的布局和不同的内容。
这是构建无错误、完全响应式网站的两种不同方法。这些方法如下所示:
桌面优先设计方法 - 在这种构建响应式网站的方法中，您将首先构建整个网站的桌面版本，这意味着，在这种方法中，CSS 会先为桌面设备编写，然后再为其他设备编写。
移动优先设计方法 - 顾名思义，移动优先方法是指首先为移动设备构建网站，然后使用 CSS 媒体查询将移动设计的 CSS 覆盖为适用于宽度不断增加的设备。
现在让我们了解构建响应式网页设计的第一种方法，即移动优先方法，并使用代码示例进行实际实施。
正如我们已经讨论过的，这种方法将首先构建移动设计。因此，首先我们将为移动端设计编写 CSS，然后使用媒体查询为更大屏幕的设备编写 CSS。
让我们借助代码示例详细查看并理解它。
步骤
步骤 1 − 第一步，我们将定义所有必需的 HTML 元素，例如 <img>、<p>、<h> 等，并使用合适的类，使它们能够在不同的屏幕上响应。
步骤 2 − 下一步，我们将在 <head> 内定义一个 <style> 标签。文档的标签，首先编写移动端特定的 CSS。
步骤 3 − 在最后一步中，我们将使用媒体查询为其他屏幕设备编写 CSS，以覆盖一些适用于更大屏幕的移动样式。
示例
以下示例将解释如何在 HTML 中使用媒体查询编写适用于移动优先方法的 CSS −
<!DOCTYPE html>
<html lang = "en">
<head>
<meta content = "width=device-width, initial-scale = 1" name = "viewport" />
<style>
/* CSS that will be applied on for mobile and Tablet devices */
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
p.para-text {
border: 2px solid black;
padding: 20px;
margin-bottom: 10px;
}
img {
width: 300px;
}
/* CSS that will be applied on devices with bigger screens */
@media screen and (min-width: 770px) {
.container {
flex-direction: row;
align-items: center;
column-width: 200px;
justify-content: space-evenly;
column-gap: 10px;
}
p.para-text {
border: 2px solid green;
padding: 30px;
}
img {
width: 200px;
}
}
</style>
</head>
<body>
<center>
<h2> Using media queries in a mobile-first approach in HTML </h2>
<p> The below web page will adjust itself for different screen width devices. </p>
<div class = "container">
<img src = "https://www.cainiaomax.com/cg/images/logo.png" alt="Tutorialspoint Logo">
<p class = "para-text"> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p>
</div>
</center>
</body>
</html>
在上面的例子中，我们改变了在不同屏幕上显示内容的方式。在移动设备和平板设备上，内容以单列对齐，每个元素占满整个屏幕宽度。而在更大的设备或桌面设备上，内容则显示在同一行中，每个内容容器元素占据不同的列。在这个例子中，不仅内容的对齐方式会随着屏幕设备的改变而变化，而且包含文本内容的容器的边框颜色也会发生变化。我们遵循移动优先的理念来实现所有这些。
在本文中，我们学习了如何以移动优先的理念使用媒体查询来构建响应式网站。我们通过代码示例的实际应用，详细讨论并了解了它的用法，并观察了内容层次结构在不同屏幕尺寸的设备上渲染时的变化结果。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
