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

Question

我正在使用 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;
}

Answer 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%;
    }
  }

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

CSS media query to change font-size in html selector not working

html

css

sass

vue.js

scss-mixins