为什么我的媒体查询代码在 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){....}