Question

我无法修改正文的 font-size 和 html 标签。我正在尝试使用 rem 来更改页面的文本（我知道这种度量是基于html或body标签的，我不确定）。如果我使用rem，那么只需修改提到的标签中的font-size大小就足够了，因此我的内容也会更改大小。我是对的？或最佳做法是什么？非常感谢。

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

尝试不使用内联样式，并从最大到最小顺序升序，并更具体地指定要减小其大小的内容。如果使用内联样式，请使用!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>

Answer 2

更改媒体查询的顺序，并考虑将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 3

在我看来，当您更改屏幕大小时，字体大小也会发生变化。尝试在小提琴中输入较大的字体大小，例如10、14、18和24px。我这样做了，大小明显改变了。

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

要查看大量示例，请使用Google“响应式@media CSS”或类似内容。

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

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

3 个答案: