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？

我尝试添加font-size，因为它似乎是父元素（？）

/*--------------------------------------------------------------
# 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

你几乎得到了它。如果使用rem s，根据视口控制所有字体的唯一方法是更改根元素的字体大小，可以说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)));
}

它可以在14px - 26px范围内缩放html的字体大小，具体取决于视口大小300px - 1600px。

<强> PS 即可。此外，这里

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

首先设置20px然后用1rem重写它，所以它没有任何效果。您可能想要删除font-size: 1rem;。它将为父元素（正文）设置字体大小等于20px，但它也将为其中给出的其他元素（输入，按钮等）设置。涉及html元素的方法是常见的，它更清晰。

如何在Underscores（wordpress）上制作响应式排版？

1 个答案: