@media 最大宽度：XX px；不能正常工作

Question

我是 web 开发的新手，我在使用@media 时遇到问题

当屏幕尺寸低于 992px（即 991px 及以下）时，我试图实现此显示。 原图

我的问题是当屏幕为 991px 时，显示是这样的。 问题

但是当我的屏幕低于 991px 时，它会显示预期的行为。 991px 以下

这是我的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <title>Assignment Solution for Module 2</title>
</head>
<body>
    <h1>Our Menu</h1>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-4 col-md-6">
                <h3>Div 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>  

            <div class="col-lg-4 col-md-6">
                <h3>Div 2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>          
            <div class="col-lg-4 col-md-12">
                <h3>Div 3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            
            </div>
        </div>
    </div>
</body>
</html>

这是我的 CSS 代码：

* {
    box-sizing: border-box;
}

body{
    margin-top: 40px;
    background-color: #F9F9FB;
}

.container-fluid {
    margin-top: 50px;
}

h1, h3{
  text-align: center;
}

h3 {
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    margin: 0px;
    padding: 1px;
    width: 33.33%;
    height: 28px;
  float: right;
    background-color: #B59F84;

}

.row div {
    border: 1px solid black;
    padding: 0px;
    margin: 10px;
    background-color: #FFFFF5;
}

p {
    margin: 0px;
    padding: 10px;
    clear: right;
}

/********** Large devices only **********/
@media (min-width: 992px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  .col-lg-1 {
    width: calc(8.33% - 20px);
  }
  .col-lg-2 {
    width: calc(16.66% - 20px);
  }
  .col-lg-3 {
    width: calc(25% - 20px);
  }
  .col-lg-4 {
    width: calc(33.33% - 20px);
  }
  .col-lg-5 {
    width: calc(41.66% - 20px);
  }
  .col-lg-6 {
    width: calc(50% - 20px);
  }
  .col-lg-7 {
    width: calc(58.33% - 20px);
  }
  .col-lg-8 {
    width: calc(66.66% - 20px);
  }
  .col-lg-9 {
    width: calc(74.99% - 20px);
  }
  .col-lg-10 {
    width: calc(83.33% - 20px);
  }
  .col-lg-11 {
    width: calc(91.66% - 20px);
  }
  .col-lg-12 {
    width: calc(100% - 20px);
  }
}

/********** Medium devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-1 {
    width: calc(8.33% - 20px);
  }
  .col-md-2 {
    width: calc(16.66% - 20px);
  }
  .col-md-3 {
    width: calc(25% - 20px);
  }
  .col-md-4 {
    width: calc(33.33% - 20px);
  }
  .col-md-5 {
    width: calc(41.66% - 20px);
  }
  .col-md-6 {
    width: calc(50% - 20px);
  }
  .col-md-7 {
    width: calc(58.33% - 20px);
  }
  .col-md-8 {
    width: calc(66.66% - 20px);
  }
  .col-md-9 {
    width: calc(74.99% - 20px);
  }
  .col-md-10 {
    width: calc(83.33% - 20px);
  }
  .col-md-11 {
    width: calc(91.66% - 20px);
  }
  .col-md-12 {
    width: calc(100% - 20px);
  }
}

我观察到的是，当我将范围调整为 @media (min-width: 768px) 和 (max-width: 992px ) 时，它会显示预期的行为。 调整后的最大宽度

Answer 1

您可以删除浮动：对； h3 元素的属性并将其宽度设置为 33.33%，这样您就可以获得您期望的布局。

并且，您可以将 min-width: 991px 添加到 the.row div 元素，以确保当屏幕尺寸低于 991px 时，它们不会在 h3 元素下显示为 go。

h3 {
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    margin: 0px;
    padding: 1px;
    width: 33.33%;
    height: 28px;
    background-color: #B59F84;
}

.row div {
    border: 1px solid black;
    padding: 0px;
    margin: 10px;
    background-color: #FFFFF5;
    min-width: 991px;
}

@media 最大宽度：XX px；不能正常工作

问题描述

1 个解决方案

解决方案1
0 2023-01-12 04:20:26

@media 最大宽度：XX px； 不能正常工作

问题描述

1 个解决方案

解决方案1 0 2023-01-12 04:20:26

@media 最大宽度：XX px；不能正常工作

解决方案1
0 2023-01-12 04:20:26