使用 @mediaquery 更改字体大小答案

【问题标题】：Changing font sizes using a @mediaquery使用 @mediaquery 更改字体大小
【发布时间】：2020-04-18 00:16:46
【问题描述】：

在我正在制作的网站中，我想更改字体大小，以便当屏幕变小时字体大小适合屏幕。尝试使用 @media 查询以更改字体大小，但似乎不起作用。这是网站的代码；

 <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;
    }
}

谁能告诉我我做错了什么？对不起，如果我解释得不好，我只是一年级的大学生，不太清楚自己在做什么，而且对这类事情不太擅长。

【问题讨论】：

设置这样的视口<meta name="viewport" content="width=device-width, initial-scale=1.0">w3schools.com/css/css_rwd_viewport.asp
+ 仅供参考，您可以将媒体查询缩短为 @media (max-width: 430px) { }
@Aaron 也许他对屏幕和打印有不同的媒体查询；p
max-width: 430px 表示屏幕尺寸为 430 像素和更小。你的意思是min-width: 430px（基于“这是用于全屏时”的评论）？
工作正常：jsfiddle.net/47u6gn22。你的基本字体大小是多少？

标签： html css fonts media-queries

【解决方案1】：

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

为正文元素定义基本字体大小。
使用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
  }
}

&lt;p&gt;Here's some text.&lt;/p&gt;

这是working JSFiddle。

【讨论】：