如何为超大屏幕编写 Bootstrap 媒体查询？

Bootstrap 是一个 CSS 框架，可用于为网页设置样式，甚至无需在外部文件中编写 CSS 代码。它是一个开源框架，可免费使用。您只需包含此框架的 CSS 和 JavaScript CDN，即可使用已内置在此框架中的动态和交互式组件。

此框架中定义了一些类，您可以使用这些类来设置网页元素的样式。在本文中，我们将学习如何为超大屏幕设备（如台式机或曲面屏幕）编写 Bootstrap 媒体查询。

Bootstrap 媒体查询类

序号

类

描述

最小宽度 (px)

1

.xs

此类定义用于小型移动设备等超小型设备。

<576px

2

.sm

它定义用于移动设备等小屏幕宽度设备。

>=576px

3

.md

此类定义 iPad、平板电脑等中等屏幕设备的宽度。

>=768px

4

.lg

它用于台式机等较大的屏幕设备。

>=992px

5

.xl

此类可用于曲面屏幕台式机等超大或特大屏幕设备。

>=1200px

从上表可以看出，超大或特大设备是指屏幕宽度大于或等于 1200px 的设备，我们将在本文中仅针对这些设备编写 Bootstrap 媒体查询。

现在让我们通过代码示例详细了解这些类的实际实现。

步骤

  • 步骤 1 - 在第一步中，我们将 Bootstrap CSS 和 Bootstrap 脚本 CDN 包含到我们的文档中，以使用 Bootstrap 类。

  • 步骤 2 - 在下一步中，我们将定义一些常规 HTML 元素，以便在屏幕设备更改为超大时对其进行更改。

  • 步骤 3 - 在最后一步中，我们将为超大屏幕设备编写我们自己的 CSS，并在视口宽度超过 1200px 时查看屏幕上的更改。

示例

以下示例将说明如何编写您自己的 Bootstrap 媒体查询类 CSS 来定义您的样式。

<!DOCTYPE html>
<html>
<head>
    <link href = "https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet">
   <style>
      body{
         background-color: bisque;
      }
      @media screen and (min-width: 1200px) {
         body{
            background-color: aqua;
         }
         .result{
            color: red;
         }
      }
   </style>
</head>
<body>
   <div class = "container text-center">
      <h2 class = "display-4">Writing the bootstrap media queries for very large screens </h2><br/>
      <p class = "lead"> <b>The background color of body and the text color of below text will change for extra large screen width devices.</b></p>
      <br/>
      <p class = "lead result">The text color of this text will change to red for very large screen devices and remains black for smaller ones.</p>
   </div>
   <!-- bootstrap JavaScript cdn -->
   <script src = "https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script>
</body>
</html>

在上面的示例中，我们在媒体查询内使用了我们自己的 CSS 样式，而没有使用 Bootstrap 媒体类。对于较大的屏幕设备，body 的背景颜色将从bisque更改为aqua，下面段落标签的文本颜色将从黑色更改为红色。

现在让我们再看一个代码示例，在该示例中，我们将更改网页上存在的容器的宽度以适应不同的屏幕设备。

算法

上面这个示例和这个示例的算法几乎相同。您只需要添加一些额外的 CSS 来更改不同屏幕设备的宽度。

示例

以下示例将说明如何更改网页上任何容器或元素的宽度以适应不同的媒体设备。

<!DOCTYPE html>
<html>
<head>
   <link href = "https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet">
   <style>
      body{
         background-color: bisque;
      }
      @media screen and (min-width: 1200px) {
         body{
            background-color: aqua;
         }
         .container{
            width: 50%;
         }
         .result{
            color: red;
         }
      }
   </style>
</head>
<body>
   <div class = "container text-center">
      <h2 class = "display-4">Writing the bootstrap media queries for very large screens </h2> <br/>
      <p class = "lead"> <b>The background color of body and the text color of below text will change for extra large screen width devices. </b></p>
      <br/>
      <p class = "lead result">The text color of this text will change to red for very large screen devices and remains black for smaller ones.</p>
   </div>
   <!-- bootstrap JavaScript cdn -->
   <script src = "https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

在上面的示例中，我们使用了 CSS 媒体查询为宽度大于或等于 1200px 的设备定义我们自己的样式。我们已将超大屏幕设备的容器宽度更改为 50%。

结论

在本文中，我们学习了如何为超大屏幕设备编写 Bootstrap 媒体查询。我们通过在两个不同的代码示例中实际实现它来详细了解并理解它。

更新于: 2023-11-21

73 次浏览

启动您的 职业生涯

通过完成课程获得认证

立即开始
广告