目標:看到 h1 字體大小在達到 375px 螢屏大小時調整大小。
實際發生的是它正在應用 1303px 大小的螢屏的樣式。
它洗掉了實際適用于該螢屏尺寸(375px)的媒體查詢......
我試過的:
檢查我在 html 中有這個
<meta name="viewport" content="width=device-width, initial-scale=1.0">嘗試了 min-width 并嘗試更改值
h1 { padding-bottom: 61px; font-family: $h1; font-weight: 700; font-size: 55px; letter-spacing: -0.45px; line-height: 50px; color: $primary-color-grey; width: 428px; position: absolute; left: 0px; @media screen and (max-width: 375px) { font-size: 20px; width: 660px; line-height: 65px; } @media screen and (max-width: 816px) { font-size: 55px; width: 660px; line-height: 65px; } @media screen and (max-width: 1303px) { font-size: 60px; width: 660px; line-height: 65px; } }

uj5u.com熱心網友回復:
應用 1303px 媒體是正常的,因為告訴它是最大寬度,這意味著所有較小的螢屏都會應用該樣式,除了它已經到了最后一個樣式。所以它將覆寫所有以前的樣式。
“szulbix”解決方案非常適合您的情況。
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/411377.html
標籤:
