Question

它应该很简单，但无论出于什么原因，我都不会为我工作。

例如我有

    <div id="big_paragraph">
        <p>I will make sure you get upvoted,</p>
        <p>if you answer this simple question</p>
        <p>for me. Thanks!</p>
    </div><!-- big_paragraph -->

我希望font-size能够响应，所以在我的CSS中我有

* {
    margin:0;
    padding:0;
    border:none;
}

html{
    font-size: 62.5%;
/* I also tried font-size: 16px; to no avail */
}

body{
    font-family: 'Muli', sans-serif;
}

#big_paragraph{
    margin-top:101px;
    font-size: 4.1rem;/*41px*/
    text-align:center;
}

我不知道这是否重要，但我的html中还有以下内容

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

Answer 1

我相信你必须根据media query进行更改。所以，清理一下，这对我有用。希望这会有所帮助。

＆＃13;

body{
    font-family: 'Muli', sans-serif;
    font-size: 62.5%;
}

#big_paragraph{
    margin-top:101px;
    font-size: 4.1rem;/*41px*/
    text-align:center;
}

@media only screen and (max-width: 720px) {

   #big_paragraph  { 
      font-size: 150%; 
   }

}

＆＃13;

    <div id="big_paragraph">
        <p>I will make sure you get upvoted,</p>
        <p>if you answer this simple question</p>
        <p>for me. Thanks!</p>
    </div><!-- big_paragraph -->

＆＃13;

Answer 2

这应该可行，但可能只适用于现代浏览器。

.some-paragraph{
    font-size: 5vw !important;
}

Answer 3

您的代码似乎对我来说很好。

但我建议使用类而不是id，以便稍后可以重用css。

我会对此作出评论，但我还没有这个能力。

字体没有使用rems调整大小

3 个答案: