响应式 html5 css 网站中的字体大小答案

【问题标题】：font sizes in responsive html5 css website响应式 html5 css 网站中的字体大小
【发布时间】：2018-06-29 11:07:46
【问题描述】：

我正在重新设计我的网站以适用于所有浏览器和设备，为此我从我购买的响应式模板开始。我是响应式设计的新手。我的问题是关于字体大小。我试图有一个 H-U-G-E 标题（全屏），在所有设备上看起来都很大。我不是 CSS 专家，但我读到 'em' 用于字体的相对/比例大小，所以我将标题的字体设置为 4em，大约有 500px 出现在计算机屏幕上但是当我在 iPhone 上查看页面时，标题很小，比其他文本要小。

我应该坚持使用“px”中的尺寸并找到适用于屏幕和 iOS 屏幕的尺寸，还是有办法在所有设备上都适用？

我使用的模板顶部确实有这一行：

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

【问题讨论】：

如果您希望标题相对于屏幕宽度具有相同的大小，您应该查看vw 单位而不是px。 1vw 是屏幕宽度的百分之一。无论如何，4em 不可能小于周围的文字；这不是EMS的工作方式。 4em 是周围文本的四倍。如果这在所有设备上都不起作用，那么你做错了。也许媒体查询搞砸了？
感谢您的建议...我刚刚尝试了'vw'并且发生了同样的事情：在计算机上它很大，然后在 iOS 上它很小...我怎样才能解决这个问题并理解？

标签： android ios css html

【解决方案1】：

要在你的网站上做响应式文本，你应该试试Media Queries. 这是一种在不同屏幕尺寸上调整文本大小的简单方法。

例如，如果您希望屏幕上的 500px h1 大于 1200px，您将编写：

@media screen and (min-width: 1200px) {
h1.
{ 
font-size: 500px;
}

等等，在每个屏幕上size

@media screen and (min-width: 992px) and (max-width: 1199px) {
h1.
{ 
font-size: 300px;
}

希望对你有所帮助，请告诉我..

【讨论】：

谢谢，这很有帮助，我会试试...我应该考虑多少尺寸？有没有办法做到比例，所以我不必输入太多的屏幕尺寸？
嗯，不同的屏幕尺寸是：> = 1200 px，大屏幕（从大屏幕到电视）在 992 和 1199 像素之间，用于普通桌面屏幕，在 768 和 991 像素之间，用于平板电脑屏幕，介于480 和 767 像素用于移动屏幕。事实上，通过使用“f12”在 chrome 中打开控制台来测试自己，然后当你的控制台打开时，缩小页面，你会在右上角看到以像素为单位的屏幕大小。是的，您不得不为每种屏幕尺寸指定每种尺寸，当您习惯时，这并不难，而且非常有帮助。
太棒了。谢谢
很高兴能帮到你，你能验证我的回答吗？您需要单击 ▼ 下方的小“检查”，如果有人问同样的问题，它会提供帮助☺。