媒体断点失败

Question

我在这里遗漏了一些非常简单的东西，所以希望有人能解开我的脑筋。

我的页面布局工作正常，但在应用媒体断点时没有任何变化。下面是我的 CSS 的例子。你可以看到我只是改变字体大小来尝试让事情正常工作但是改变浏览器宽度时没有任何变化。无论浏览器宽度如何，p 字体保持相同大小。

重要的是 - 常规 Bootstrap 响应和页面布局确实会发生，我自己的媒体说明不会。

p {
  font-size: 16px;
}


@media (min-width: 576px) { 
  p {
  font-size: 116%;
  }
}

@media (min-width: 768px) {
  p {
  font-size: 108%;
  }
}

另一个例子是我添加的轮播。媒体说明只涉及轮播的高度。但就像上面的例子一样 - 无论浏览器宽度如何，轮播高度都保持不变。

#carouselMain {
  height: 460px;
}

@media (min-width: 576px) { 
  #carouselMain {
  height: 660px;
  }
}

@media (min-width: 768px) {
  #carouselMain {
  height: 560px;
  }
}

谢谢。我不知道为什么会这样。之前有人问过类似的问题，但给定的答案似乎不适用于这个问题。

Answer 1

您试过在属性之后使用 !important 吗？像这样：

@media (min-width: 576px) { 
  p {
  font-size: 116%!important;
  }
}

Answer 2

给 <p> 一个 id，然后将其添加到 CSS 样式表：

@media (min-width: 400px) { 
  #p{
    color: red;
    font-size:24px;
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

 
  <div class="container-fluid"> 
    <p id="p">P media</p>
  </div>

还是用！重要 w3.org (info)

@media (min-width: 400px) { 
  .container-fluid > .p{
    color: red;
    font-size: 34px!important;
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

 
  <div class="container-fluid"> 
    <p class="p">P media</p>
  </div>

Answer 3

就像那些经常遗漏破折号和斜杠的问题一样，问题是 CSS 在我的断点之前的语法不佳，因此断点没有得到正确处理。接下来的两天半我要打卡了。

媒体断点失败

Media Breakpoints are failing

css

breakpoints

bootstrap-5