@media 规则的问题

Question

所以我正在制作一个页面，并将我的@media 规则放在一个 responsive.css 文件中。所以一切正常，直到我上传到服务器并且 responsive.css 仍在被调用但其规则的 none 正在工作。我也发现在家里也是如此。知道为什么会这样吗？

下面是我使用的链接。和 responsive.css 文件。

同样，这在工作中有效，但在其他任何地方都无效，样式 .css 工作正常，我的 jquery 脚本也是如此。提前致谢

（由于 CopyR 原因无法显示完整代码）

mobilenav {
  display: none;
  font-size: 450%;
  position: fixed;
  right: 0;
  top: 0;
  height: 1em;
  z-index: 10;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 20%;
  background-color: var(--katlgreen);
}

mobilenav h1 {
  background-color: transparent;
}

navmenu {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  background-color: var(--katdgreen);
  z-index: 9;
}

navmenu a {
  margin-left: 2em;
  font-size: 150%;
  margin-top: 3em;
  font-weight: 900;
}


/* columns and removes */

@media only screen and (max-width: 1200px) {
  td {
    font-size: 90%;
  }
}

@media only screen and (max-width: 950px) {
  column {
    width: 48%;
    margin-top: 1em;
  }
}

@media only screen and (max-width: 450px) {
  column {
    width: 98%;
    margin-top: 1em;
  }
  #estlogo {
    display: none;
  }
  brandbuttons {
    display: none;
  }
  nav {
    display: none;
  }
  tab {
    display: none;
  }
  header {
    background-color: var(--katlgreen);
    margin-bottom: 1em;
    height: 5em;
    align-content: center;
  }
  mobilenav {
    display: flex;
  }
  #katlogo {
    margin: auto 5%;
  }
}


/* columns and removes */

@media only screen and (min-width: 951px) and (max-width: 1200px) {
  nav {
    width: 50%;
  }
  tabline {
    width: 55%;
  }
}

@media only screen and (min-width: 750px) and (max-width: 950px) {
  .brandbutton2 {
    width: 40%;
    margin: 0;
  }
  .brandbuttons2 {
    justify-content: space-around;
    width: 100%;
  }
  #katlogo {
    width: 120px;
  }
  #estlogo {
    width: 80px;
  }
  nav {
    width: 50%;
  }
  tabline {
    width: 55%;
  }
}

@media only screen and (min-width: 360px) and (max-width: 749px) {
  * {
    font-size: 98%;
  }
  .brandbutton2 {
    width: 40%;
    margin: 0;
  }
  .brandbuttons2 {
    justify-content: space-around;
    width: 100%;
  }
  nav {
    width: 80%;
  }
  tabline {
    width: 85%;
  }
  #katlogo {
    width: 120px;
  }
  #estlogo {
    width: 80px;
  }
}

@media only screen and (min-width: 250px) and (max-width: 359px) {
  * {
    font-size: 98%;
  }
  #katlogo {
    width: 100px;
  }
}

@media only screen and (max-width: 250px) {
  * {
    font-size: 96%;
  }
  #katlogo {
    width: 80px;
  }
}


/* mobile change hdr tab to menu complete
/* vs device delete second logo and remove 2 buttons. complete

<link href="styles.css" rel="stylesheet" type="text/css">
<link href="functions.css" rel="stylesheet" type="text/css">
<link href="responsive.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">

Answer 1

也许使用 min-width 而不是 max-width

Answer 2

我发现修复此解决方案的最佳方法是添加以下元代码以提高移动响应能力。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

@media 规则的问题

Issue with @media rule

html

css

media-queries