html - 如何在下划线(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，你唯一需要根据视口(viewport)控制所有字体的是改变根元素的字体大小让我们说 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)));
}

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

附言。此外，这里

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

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