如何在下划线（wordpress）上制作响应式排版？

Question

试图弄清楚如何使用下划线。之前，为了让不同屏幕的排版响应字体，我通常会编写不同的媒体查询如下：

@media screen and (min-width: 480px) {
    html{
        font-size: 18px;
    }
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1rem;
    }
      etc..
}

   @media screen and (min-width: 700px) {
        html{
            font-size: 14px;
        }
        h1 {
            font-size: 0.5rem;
        }
        h2 {
            font-size: 1.3rem;
        }
          etc..
    }

如何使用下划线更改父字体大小，以便子元素可以具有rem 大小？

我尝试添加字体大小，因为它似乎是父元素 (?)

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
    color: #404040;
    font-family: Merriweather, sans-serif;
    font-size:20px;
    font-size: 1rem;
    line-height: 1.5;
    color:red;


}

最好的方法是什么？

Answer 1

你几乎明白了。如果您使用rems，您唯一需要根据视口控制所有字体的就是更改根元素的字体大小，比如说html：

html {
    font-size: 12px;
}

p {
   font-size: 1.1rem;
}

.footer {
   font-size: .9rem;
}

@media (max-width: 767px) { 
   /* now the basis for all the font sizes set in
   rems is 10px. For example, font-size for p is 10*1.1 = 11px. 
   Previously it was 1.1*12 = 13.2px. */
   html {
       font-size: 10px;
   }
}

您也可以使用所谓的fluid typography 并将其与以前的方法结合使用以获得响应能力（字体将在每次调整大小尝试时缩放，而不仅仅是在通过某些限制之后）：

html {
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

它根据视口大小 300px - 1600px 在 14px - 26px 范围内缩放 html 的字体大小。

附言。另外，这里

font-size:20px;
font-size: 1rem;

你先设置20px，然后用1rem重写，所以没有任何效果。您可能想要删除 font-size: 1rem;。它将为父元素（主体）设置字体大小等于 20px，但它也会为那里给定的其他元素（输入、按钮等）设置字体大小。涉及html 元素的方法是一种常见的方法，它更干净。