屏幕宽度小于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; }