屏幕宽度小于X时是否有可能禁用继承？

Question

I am making simple website with my friend and he did 'sticky' header which decreases for example font-size while scrolling but we do not want these classes to "work" when website is in mobile version. Is there a possibility to turn that inheritance off when our website width is less than 400px for example? I mean we have media queries but we do not want this code to start working when website is in media screen max width 400px mode is it even possible? thanks a lot for all responses.

 /* 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

You can use, instead of max-width: 400px; , min-width: 1024px; for the media query.

Answer 2

It looks like you just want to wrap the first part in a media query?

eg:

 /* 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; }