使用媒体查询修改 html 标签的字体大小

Question

我无法修改正文的 font-size 和 html 标签。我正在尝试使用 rem 更改页面的文本（我知道此措施基于 html 或 body 标签，我不确定）。如果我使用 rem，只需修改上述标签中字体大小的大小就足够了，因此我的内容的大小会发生变化。我是对的？或者最佳做法是什么？非常感谢。

html, body{
 font-size: 12px;
}

@media (min-width: 576px) { 
  html, body{
  font-size: 12px;
 }
}

@media (min-width: 768px) { 
 html{
 font-size: 13px;
 }
}

@media (min-width: 992px) { 
 html{
 font-size: 14px !important;
 }
}

@media (min-width: 1200px) {
 html{
  font-size: 15px !important;
  } 
}

https://jsfiddle.net/a0s4qt8w/

Answer 1

更改媒体查询的顺序并考虑将min 更改为max 宽度。

p::after,
p {
  font-size: 12px;
  content: ", 12px";
}

@media (max-width: 999px) {
  p::after,
  p {
    font-size: 14px;
    content: ", 14px";
  }
}

@media (max-width: 768px) {
  p::after,
  p {
    font-size: 13px;
    content: ", 13px";
  }
}

@media (max-width: 568px) {
  p::after,
  p {
    font-size: 11px;
    content: ", 11px";
  }
}

@media (max-width: 400px) {
  p::after,
  p {
    font-size: 10px;
    content: ", 10px";
  }
}

<p>Hello world</p>

Answer 2

在我看来，当您更改屏幕大小时，字体大小会发生变化。尝试在您的小提琴中放置差异较大的字体大小，例如 10、14、18 和 24 像素。我做了，而且尺寸明显改变了。

稍微解释一下 Arvind 的回答：您可以使用 min-width （尽管您的最低值是多余的 - 实际上，您的代码是说字体大小在任何小于 768 像素的屏幕上都是 12 像素）。但是，更常见的做法是使用 max-width 并按照 Arvind 的做法从大到小。

要查看大量示例，请搜索“响应式@media css”或类似内容。

另外，rem 基于 html 标签，而不是 body 标签。 Here's 一个例子。

Answer 3

尽量不要使用内联样式，并按从多到少的顺序进行排序，并更具体地说明要减小哪些内容的大小。如果使用内联样式，请使用!important 覆盖先前样式化的元素或尝试使用其父类来更改它。

ps：我这里去掉了内联样式

小提琴：https://jsfiddle.net/a0s4qt8w/15/

   p{font-size:18px;}

@media screen and (max-width: 1200px) {

  html, body, p{
    font-size: 15px;
  }
 }
 
@media screen and (max-width: 992px) { 
  html, body, p{
    font-size: 14px;
  }
 }

@media screen and (max-width: 768px) { 

 html, body, p{
    font-size: 13px;
  }
}


 @media screen and (max-width: 576px) { 
  html, body, p{
    font-size: 12px;
  }
  }

     <div style="height:   100vh; display:   flex; flex-direction:   column; justify-content: center; align-items:center;">
          <p>
           mi mamá me mima mame mi mo mu
            <br>
             <br>
            *indicaciones <br>
            *indicacion chulas <br>
            *indicaciones pedras<br>

          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
          </p>
      </div>