Question

在我制作的网站中，我想要更改字体大小，以便在屏幕变小时，字体大小适合屏幕。尝试使用@mediaquary，因此字体会改变大小，但它似乎并没有起作用。这是该网站的代码;

 <div class="row members Rou" style="background-color:#000000">
    <div class="col-sm-4">
        <h2> Rou Reynolds </h2>
        <img src="Rou.png" class="image-full-width band ">
    </div>
    <div class="col-sm-8">
        <p class="paragraph-push-down"> 
                 blah blah blah
        </p>
    </div>
</div>

这就是我试图放在样式表中的内容，这就是我希望它在屏幕较小时的样子;

.paragraph-push-down {
margin-top: 80px;
text-align: left;
font-family: century gothic;
    font-size: 100%;
}

这适用于屏幕尺寸齐全的情况;

@media only screen and (max-width: 430px) {
.paragraph-push-down {
    margin-top: 5px;
    text-align: left;
    font-family: century gothic;
        font-size: 20em;
    }
}

有人能告诉我我做错了什么吗？对不起，如果我已经解释得很糟糕，只有一年级的大学生，并且不太了解我在做什么，而不是那么好。

Answer 1

我建议在这种情况下使用rem单位来缩放字体，并采用移动优先方法。这是基本的想法。

为您的body元素定义基本字体大小。
使用rem单位定义元素的字体大小。例如，1rem会使字体为16px。
使用media单位在rem查询中为较大视口大小定义元素的字体大小。

body {
  font-size: 16px;
}

p {
  font-size: 1rem; // 16px
}

@media only screen and (min-width: 430px) {
  p {
    font-size: 2rem; // 16 * 2 = 32px
  }
}

<p>Here's some text.</p>

这是working JSFiddle。

使用@mediaquery更改字体大小

1 个答案: