使用Media Queries按屏幕尺寸调整导航文字大小失效问题咨询

问题原因 #

SCSS 嵌套规则使用错误：你在 .sidebar 规则块内部的媒体查询中重复声明了 .sidebar 选择器，代码编译后会生成 .sidebar .sidebar 的后代选择器，只能匹配到 .sidebar 内部的同名子元素，无法命中当前的导航栏容器本身，因此大屏幕下的字体设置不生效。

修正代码 #

将媒体查询内部的重复选择器移除即可，修改后的SCSS代码如下：

.sidebar{
  z-index: 1;
  font-weight: bolder;
  margin-left: auto;
  margin-right: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  font-family: 'Raleway', sans-serif;
  color: black;

  /* 屏幕宽度601px及以上，字体大小设为80px */
  @media screen and (min-width: 601px) {
    font-size: 80px;
  }

  /* 屏幕宽度600px及以下，字体大小设为30px */
  @media screen and (max-width: 600px) {
    font-size: 30px;
  }
}

效果验证 #

修改后重新编译代码，打开浏览器开发者工具查看.sidebar元素的样式，即可看到不同屏幕宽度下对应的字体大小规则已经可以正常匹配生效。

内容的提问来源于stack exchange，提问作者Dani