屏幕寬度小於X時是否有可能禁用繼承？

Question

我正在和我的朋友制作一個簡單的網站，他做了“粘性”標題，例如，在滾動時會減小字體大小，但是當網站處於移動版本時，我們不希望這些類“起作用”。 例如，當我們的網站寬度小於400px時，是否可以關閉該繼承？ 我的意思是我們有媒體查詢，但是當網站處於媒體屏幕最大寬度為400px模式時，我們不希望此代碼開始工作嗎？ 非常感謝您的所有回復。

 /* I want this to work when screen is bigger than 1024px */ header.sticky a { padding: 0px 0px 20px 0px; font-size: 18px; font-weight: 100; transition: .5s; font-weight: 500; } header.sticky { background-color: RGB(105,0,0,0.8); transition: .5s; } header a.active { color: #E6AF2E; } header.sticky .logo{ margin: 0; transition: .5s; font-size: 40px; } /* that was standard header */ header{ font-weight: 500; background: transparent; text-align: center; position: fixed; z-index: 999; width: 100%; transition: .5s; } header h1{ font-family: 'Kaushan Script', cursive; color: #fff; font-size: 48px; letter-spacing: 2px; transition: 0.3s; transition: .5s; } header h1:hover{ color: #E6AF2E; cursor: pointer; } 

Answer 1

您可以使用而不是max-width: 400px; ， min-width: 1024px; 用於媒體查詢。

Answer 2

看來您只想將第一部分包裝在媒體查詢中？

例如：

 /* I want this to work when screen is bigger than 1024px */ @media screen and (min-width: 1024px){ header.sticky a { padding: 0px 0px 20px 0px; font-size: 18px; font-weight: 100; transition: .5s; font-weight: 500; } header.sticky { background-color: RGB(105,0,0,0.8); transition: .5s; } header a.active { color: #E6AF2E; } header.sticky .logo{ margin: 0; transition: .5s; font-size: 40px; } } /* that was standard header */ header{ font-weight: 500; background: transparent; text-align: center; position: fixed; z-index: 999; width: 100%; transition: .5s; } header h1{ font-family: 'Kaushan Script', cursive; color: #fff; font-size: 48px; letter-spacing: 2px; transition: 0.3s; transition: .5s; } header h1:hover{ color: #E6AF2E; cursor: pointer; }