如何在HTML中采用移动优先的方式使用媒体查询

构建响应式网页设计是必不可少的技能，每个开发者都必须了解并知道如何构建一个完全响应式并且在不同设备上展示不同的界面，而不会出现奇怪的效果或者溢出。了解从构建方法到最终设计完成的移动优先设计的方方面面非常重要，没有错误和调整。

一个响应式网站必须在所有设备上具有良好的用户体验、用户界面和设计，内容相同。为了构建一个完全响应式的网站，你可以使用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.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>

在上面的示例中，我们改变了在不同屏幕上显示内容的方式。在移动设备和平板设备上，内容以单列的方式对齐，每个元素都占满整个宽度。而在较大的台式机设备上，内容以一行单独显示，并为每个内容容器元素设置不同的列。在这个示例中，不仅内容的对齐方式随着不同的屏幕设备而改变，而且包含文本内容的容器的边框颜色也会改变。我们遵循了先移动设备的方法来实现所有这些。

在本文中，我们学习了如何在移动设备优先的方法中使用媒体查询构建响应式网站。我们详细讨论并实际实现了它的使用，通过代码示例来看看当它在不同屏幕尺寸的不同设备上呈现时，内容层次结构将如何改变。