Question

我正试图找到一种让我的排版反应灵敏的方法。我的代码将遵循。每当我刷新开发工具时，这似乎都没有达到预期的效果。如何在手机，平板电脑和笔记本电脑/台式机上正常显示文字？

 @media only screen and (min-width: 320px) 
  {
    html {line-height: 1.25em, font-size: 16px;}
    h1{line-height: 1.25em, font-size:32px;}
    h2{line-height: 1.15384em, font-size:26px;}
    h3{line-height: 1.136363em, font-size:22px;}
    h4{line-height: 1.111111em, font-size:18px;}
  }

Answer 1

您是否在HTML中设置了视口元标记？

<meta name="viewport" content="width=device-width, initial-scale=1">

另外，为什么不使用REM来使其更简单？您可以指定初始html字体大小和行高，然后更改每个查询的REM值。阅读：https://css-tricks.com/confused-rem-em/

Answer 2

有很多方法可以做到这一点，它从设计开始。您在哪里决定更改字体大小和行高的值？什么看起来很好，什么时候开始看起来很糟糕？

当您扩大浏览器窗口并且它开始看起来很糟糕时，这是您何时使用媒体查询或javascript更改值的断点。事实上，有一个javascript库可以帮助你做这些事情（但这个名字目前让我失望）。

因此，Web开发人员可以创建那些将值更改为对您而言更适合您的设备的媒体查询。

Answer 3

您可以使用css calc函数。

font-size: calc(1em + 1vw);

正如这里所说的那样

https://www.reddit.com/r/web_design/comments/4hhs53/responsive_typography_root_fontsize_calc1vw_1vh/

Answer 4

我在我的项目中使用rem代替em。它们之间的区别在于rem始终关注文档的根，在本例中为html。

然后在我的css上我有：

html {
    font-size: 1rem;

    @media (min-width: 320px) {
        font-size: 1.2rem;
    }

    @media (min-width: 760px) {
        font-size: 1.5rem;
    }
}

这样font-size内的所有<html>都会以正确的方式改变。

媒体查询响应式排版

4 个答案: