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




如何在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>

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

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



HTML 精选笔记
怎样自动将网页重定向到另一个URL如何在具有隐藏溢出的元素中显示省略号?如何使HTML的< dt >和< dd >元素保持同行HTML 如何使文本输入框不可编辑如何增加点线边框之间的间距?如何在打印大型HTML表格时处理分页问题如何将水平线分成多个部分HTML 如何在两列中显示无序列表HTML 如何显示具有嵌套计数器的有序列表如何在HTML中禁用自动换行如何禁用HTML表单和输入字段上的浏览器自动填充和自动完成如何强制< Div>元素的内容保持在同一行上?如何控制项目符号和< li>元素之间的间距HTML 如何创建mailto表单如何创建一个带可点击标签的复选框?HTML 如何创建带有换行的按钮如何创建一个具有固定左列和可滚动主体的HTML表格HTML 如何创建一个具有固定宽度右列的两栏Div布局如何在HTML中创建一个水滴形状如何在HTML中创建带有短划线的列表HTML 如何创建一个无换行或水平间距的隐藏 divHTML 如何给单选按钮分配一个已选中的初始值HTML 如何使文件输入类型仅接受图像文件HTML 如何只允许输入正数如何在HTML中设置单元格的宽度和高度如何从一个HTML页面重定向如何在HTML中创建表格边框HTML 如何设置网页的背景图片如何在HTML中创建带有数字编号的有序列表如何限制HTML输入框只接受数字输入HTML的优缺点使用table标签及其属性设计一个表格如何更改标签的Title属性的样式HTML 如何在元素之间添加空白?如何在HTML中创建表格?如何在HTML文件中包含另一个HTML文件?如何在HTML中更改链接的颜色?HTML中的表格rowspan和colspan是什么?如何在HTML中设置单元格间距?如何调整iframe的宽度和高度以适应其中的内容HTML?如何在HTML中创建多行文本输入(文本区域)?如何在HTML中设置标题的对齐方式?如何在HTML中合并表格列?如何使用HTML表单发送电子邮件?如何在HTML页面中使用动画图片?如何在HTML中合并表格单元格?如何在HTML中去除链接的下划线?如何使用HTML代码嵌入视频?如何限制表单输入文本域中允许的字符数?如何在HTML中给文字添加下划线?如何在HTML页面中创建页面链接如何使用li元素创建项目符号如何在HTML中采用移动优先的方式使用媒体查询?如何在HTML页面插入图片?如何在HTML中居中对齐表格单元格中的文本?如何在HTML中居中文本?解释HTML的布局结构RGB vs RGBA颜色格式的区别普通链接和活动链接之间的区别链接和锚标签的区别blink标记的替代方法使用CSS内容添加HTML实体如何在 HTML 中设置字体颜色?如何在HTML页面中插入超链接?如何在HTML中设置文本对齐?如何在HTML中设置背景色?如何在HTML中使用图像作为链接?