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

Question

I'm new to web development and I'm having a problem with using @media我是 web 开发的新手，我在使用@media 时遇到问题

I'm trying to achieve this display when the screen size goes below 992px, meaning 991px and below.当屏幕尺寸低于 992px（即 991px 及以下）时，我试图实现此显示。 original image原图

My problem is when screen is at 991px, the display is like this.我的问题是当屏幕为 991px 时，显示是这样的。 problem问题

But when my screen is below 991px, it displays the expected behavior.但是当我的屏幕低于 991px 时，它会显示预期的行为。 991px below 991px 以下

Here's my HTML code:这是我的 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>

Here's my CSS code:这是我的 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);
  }
}

What I observe is when I adjust the range to @media (min-width: 768px) and (max-width: 992px ) it displays the expected behavior.我观察到的是，当我将范围调整为 @media (min-width: 768px) 和 (max-width: 992px ) 时，它会显示预期的行为。 adjusted max-width调整后的最大宽度

Answer 1

You can remove the float: right;您可以删除浮动：对； property from the h3 element and set its width to 33.33% instead, this way you can have the layout that you expect. h3 元素的属性并将其宽度设置为 33.33%，这样您就可以获得您期望的布局。

And also, you can add min-width: 991px to the.row div elements to ensure they will not go under the h3 element when the screen size is below 991px.并且，您可以将 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