CSS不使用正確的字體大小

當我在Chrome中打開網頁時，第一個card-text div使用22px的字體大小，但第二個card-text div表示22px的字體大小，但使用字體大小13.75px。兩個div都表示正在使用相同的類：@media screen和（min-width：350px）和（orientation：portrait）。CSS不使用正確的字體大小

我無法找到任何可能導致此問題的解決方案。我希望有人可以給我一些方向，我可以看看這個問題，在...

.card-text { 
 
    color: var(--standard-text-color); 
 
    font-family: standard-font; 
 
} 
 
@media screen and (min-width: 300px) and (orientation: portrait) { 
 
    .card-text { 
 
    font-size: 21px; 
 
    padding: 10px; 
 
    margin: 0px; 
 
    } 
 
} 
 
@media screen and (min-width: 350px) and (orientation: portrait) { 
 
    .card-text { 
 
    font-size: 22px; 
 
    } 
 
}

<div class="card"> 
 
    <div class="card-title">Welcome</div> 
 
    <div class="card-text">This is some text</div> 
 
    <div class="card-hidden"> 
 
    <div class="card-text">This is some other text</div> 
 
    </div> 
 
</div>

來源

2016-10-03 Anonymous

問題可能是一些事情。請提供更多信息。 –

13.75px是一種計算風格，當我點擊箭頭時，它將我帶到最小寬度爲350px的類。 – Anonymous

請問您有鏈接或更完整的代碼嗎？ – SomeGuy

這可能會或可能無法正常工作，但儘量把這個在你的HTML頭：

<meta name="viewport" content="width=device-width, initial-scale=1">

來源

2016-10-03 23:17:54

這確實解決了，我打算在完成樣式表後添加一個視口。直到昨天，該網站的確顯示正確，我之前正在使用媒體查詢。感謝您的幫助！ – Anonymous

這是一個有點吃不消了評論，所以我把它寫成一個答案：原因可能是含有不同的字體大小CSS規則，

組合選擇.card-hidden .card-text（隻影響第二.card-text）
組合選擇.card > .card-text（隻影響第一.card-text）
選擇card-text:nth-child(2);（隻影響第一.card-text）或card-text:first-child;（隻影響第二個.card-text）

並可能還有一些，但不知道整個代碼它不能說哪個。

由於它們的特殊性，所有這些將覆蓋規則.card-text規則。

最後但並非最不重要它也可以通過.card-text常規CSS規則，如下後所有其他規則（也後媒體查詢），從而覆蓋它們覆蓋。

來源

2016-10-03 23:41:16 Johannes

downvote沒有評論 - >沒有好處。 – Johannes

CSS不使用正確的字體大小

回答

相關問題