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

Posted 2023-02-22

【中文标题】CSS媒体查询更改html选择器中的字体大小不起作用

【英文标题】：CSS media query to change font-size in html selector not working

【发布时间】：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;

【参考方案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%;