为啥我的媒体查询代码在 CSS 中不起作用？

Posted 2023-03-06

【中文标题】为啥我的媒体查询代码在 CSS 中不起作用？

【英文标题】：Why my media query code is not working in CSS?为什么我的媒体查询代码在 CSS 中不起作用？

【发布时间】：2021-10-18 00:01:47

【问题描述】：

问题：- 我已经应用了媒体查询，但它不起作用。我的段落不断超出移动设备的屏幕宽度，不仅我最终得到了一个没有任何内容的长垂直行，水平行也是如此。 水色 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"  class="img-fluid">
      </div>

    </div>
  </div>
  <div class="last"></div>
</section>

我目前正在开发的网站： https://ibb.co/ScjxMT5

我面临的问题：- https://ibb.co/fXXMtV0

您可以清楚地看到，我的段落超出了手机的屏幕宽度，甚至低至 400 像素

我已经确定我的窗口当前大小是 100%。

【问题讨论】：

最后一个，1400，少了一个像素

即使包含丢失的，它仍然无法正常工作

【参考方案1】：

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

【参考方案2】：

由于您使用的是整个屏幕宽度的媒体查询，因此您必须添加“仅屏幕和”

所以

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