数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装学
法学如何在 HTML 中使用媒体查询实现移动优先方法？
构建响应式网页设计是必备技能，每个开发者都必须了解如何构建一个完全响应式、无错误的网站。它在不同屏幕宽度设备上的显示效果不同，在不同设备上打开时不会出现奇怪的显示或溢出。了解如何从方法到构建，直至设计完成且无错误和调整的移动优先设计至关重要。
响应式网站必须在所有设备上提供良好的用户体验、用户界面和设计，内容相同。要构建一个完全响应式的网站，可以使用 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://tutorialspoint.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>
在上面的示例中，我们改变了在不同屏幕上显示内容的方式。在移动设备和平板电脑上，内容以单列对齐，每个元素的宽度都为全宽。而在更大的设备或桌面设备上，内容在一行中可见，每个内容容器元素都有不同的列。在这个例子中，不仅内容的对齐方式随不同的屏幕设备而变化，包含文本内容的容器的边框颜色也会发生变化。我们遵循移动优先方法来实现所有这些。
在这篇文章中，我们学习了如何在移动优先方法中使用媒体查询来构建响应式网站。我们已经讨论并详细了解了它的使用方法，并通过代码示例进行了实际的实现，并查看了结果，即当内容在具有不同屏幕尺寸的不同设备上呈现时，内容层次结构将如何变化。
134 次浏览
