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