為什么我的媒體查詢代碼在 CSS 中不起作用？

Question

問題：- 我已應用媒體查詢，但它不起作用。 我的段落不斷超出移動設備的屏幕寬度，不僅我最終得到了很長的垂直行，而且水平行也是如此。 淺綠色 div 位於最右側

我的想法（我想因為我對媒體查詢的概念是全新的，所以我 99% 確定我輸入的媒體查詢代碼都是錯誤的:"|）

 * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Raleway', sans-serif; } body { overflow-x: hidden; overflow-y: hidden; } section { width: 100vw; height: 90.5vh; } .left { padding-top: 100px; } .left h1 { font-size: 70px; font-size: bolder; letter-spacing: 2px; word-spacing: 3px; cursor: pointer; } .left h6 { font-size: 25px; margin-top: -8px; cursor: pointer; } .left p { font-size: 18px; word-spacing: 1px; letter-spacing: 2px; padding: 20px 0; cursor: pointer; } .left a { display: inline-block; background-color: white; color: black; text-decoration: none; padding: 15px 25px; text-transform: uppercase; border: 4px solid black; border-radius: 8px; cursor: pointer; } .img_part { display: flex; justify-content: center; align-items: center; padding-top: 60px; cursor: pointer; } .img_part img { width: 300px; min-height: 220px; cursor: pointer; } .last { width: 700px; height: 200px; background-color: aquamarine; display: inline-block; position: relative; left: 750px; top: -320px; z-index: -999; cursor: pointer; } /* // Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) { .left p { font-size: 15px; word-spacing: 0.2rem; letter-spacing: 0.1rem; width: auto; } } /* // Medium devices (tablets, 768px and up) */ @media (min-width: 768px) {} /* // Large devices (desktops, 992px and up) */ @media (min-width: 992px) {} /* // X-Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) {} /* // XX-Large devices (larger desktops, 1400px and up) */ @media (min-width: 1400px) {}

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" /> <section> <div class="container"> <div class="row"> <div class="col-xxl-6 collg-6 col-md-6 col-12 mx-auto left"> <h1>DETAILS</h1> <h6>summer collection</h6> <p>Vitae congue mauris rhoncus aenean vel elit scelerisque. Consequat nisl vel pretium lectus quam id leo in vitae. Dictum sit amet justo donec enim diam vulputate. Sociis natoque penatibus et magnis dis parturient. Molestie ac feugiat sed lectus vestibulum mattis.</p> <a href="#" class="btn">Learn More</a> </div> <div class="col-xxl-6 collg-6 col-md-6 col-12 mx-auto img_part"> <img src="https://picsum.photos/200/500" alt="image" class="img-fluid"> </div> </div> </div> <div class="last"></div> </section>

我目前正在開發的網站： https : //ibb.co/ScjxMT5

我面臨的問題：- https://ibb.co/fXXMtV0

正如你可以清楚地看到，即使低至 400 像素，我的段落也超出了移動設備的寬度屏幕

我已經確保我的窗口當前大小是 100%。

Answer 1

@media only screen and (max-width: 600px) {
  .yourclassname or #yourid {
    /* styling... */
  }
}

Answer 2

由於您對整個屏幕寬度使用媒體查詢，因此您必須添加“僅屏幕和”

所以

 @media only screen and (min-width:1000px){....}