我在這里錯過了一些非常簡單的東西，所以希望有人可以解開我的大腦。
我的頁面布局作業正常，但在應用媒體斷點時沒有任何變化。下面是我的 CSS 示例。您可以看到我只是在更改字體大小以嘗試使其正常作業，但是在更改瀏覽器寬度時沒有任何變化。無論瀏覽器寬度如何，p字體都保持相同大小。
重要的是——常規的引導回應和頁面布局確實發生了，我自己的媒體說明沒有。
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;
}
}
謝謝。我不知道為什么會發生這種情況。之前已經提出過類似的問題，但給定的答案似乎不適用于這個問題。
uj5u.com熱心網友回復：
您是否嘗試過使用!importantafter 屬性？像這樣：
@media (min-width: 576px) {
p {
font-size: 116%!important;
}
}uj5u.com熱心網友回復：
提供<p>一個 id，然后將其添加到 CSS 樣式表中：
@media (min-width: 400px) {
#p{
color: red;
font-size:24px;
}
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/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（資訊）
@media (min-width: 400px) {
.container-fluid > .p{
color: red;
font-size: 34px!important;
}
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container-fluid">
<p class="p">P media</p>
</div>
uj5u.com熱心網友回復：
每個人都會很高興知道問題是在我的斷點之前的 CSS 中的語法很差，因此斷點沒有被正確處理。我正在打卡。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/432846.html
上一篇：使用JS檢查子元素是否包含值
下一篇：與其他內容具有相同左邊距的影像行