@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