CSS媒体查询更改html选择器中的字体大小不起作用答案

【问题标题】：CSS media query to change font-size in html selector not workingCSS媒体查询更改html选择器中的字体大小不起作用
【发布时间】：2021-08-21 09:09:18
【问题描述】：

我正在使用 62.5% 技巧在不同的屏幕尺寸上设置我的字体大小。这些字母在大屏幕上看起来太小了，所以我想使用最小宽度媒体查询将其增加到 80% 的字体大小，但由于某种原因，这根本不起作用。难道我做错了什么？我正在使用 sass，此文件位于 _themes.scss 文件中

编辑：当我查看检查器时，媒体查询被划掉并显示“未知属性名称”

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
  @media screen and (min-width: 1600px) {
    font-size: 80%;
  }
}
html,
body {
  overflow-x: hidden;
}
body {
  font-family: 'Poppins', Avenir, Helvetica, Arial, sans-serif;
  color: hsl(0, 0%, 100%);
  text-align: center;
  font-size: 1.6rem;
  min-height: 100vh;
}

【问题讨论】：

标签： html css vue.js sass scss-mixins

【解决方案1】：

您的媒体查询需要独立存在，在初始定义之外，而不是在其中。

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
  
}
html,
body {
  overflow-x: hidden;
}
body {
  font-family: 'Poppins', Avenir, Helvetica, Arial, sans-serif;
  color: hsl(0, 0%, 100%);
  text-align: center;
  font-size: 1.6rem;
  min-height: 100vh;
}

  @media screen and (min-width: 1600px) {
    html {
      font-size: 80%;
    }
  }

【讨论】：