使用 html 和 css 的字体大小问题答案

【问题标题】：problem with font-size using html and css使用 html 和 css 的字体大小问题
【发布时间】：2011-11-07 02:13:48
【问题描述】：

当我建立我的第一个全 html/css 网站时，我使用可点击的图像作为菜单，并且每个图像和 div 都按 % 缩放，因此它可以非常好地适应所有显示器和浏览器，而且确实如此。

现在在一个新项目中，我想使用整个页面的背景图像（上面有菜单按钮但没有文本）来制作网站菜单，然后在图像顶部添加超链接文本，这样它看起来就像一个适当的菜单。

所以我不过，如果我只是将字体大小放在 % 中，它可能会随着浏览器窗口显示部分的大小增加或减少而完美缩放，它与其他所有东西都完美地配合，所以为什么不它现在工作......

我已经做到了，但它不起作用，如果我在一个 2% 或 3% 大小的 div 中设置 100% 字体大小，我不知道它到底从哪里得到百分比页面的文本取决于分辨率会太大或太小。

我知道如何根据浏览器窗口使内容可缩放，但是如何根据该内容或浏览器窗口本身使文本大小可缩放？

回复告诉如何仅使用 css 和 html 执行此操作，这对我来说更好，我知道一些脚本，但我不喜欢将显示部分与脚本部分混合，所以如果你知道如何制作这个仅使用 html/css，我将继续使用可点击的图像和百分比或像素。

谢谢。

【问题讨论】：

在使用纯 CSS 的浏览器中，无法使字体大小相对于窗口/容器大小。只是不支持。不过，您可以使用 javascript 为您进行计算，并设置一个全局基本字体大小，您可以从中设置其他所有内容的相对大小。

【解决方案1】：

font-size 不能这样工作。

font-size 是相对于其父元素的字体大小的大小。

在 CSS 中，您不能根据窗口宽度调整字体大小。但是，这可以计算in Javascript。

【讨论】：

font-size 与父元素不完全相关，如果是，我的问题就解决了。如果您进行一些测试，您就会发现这一点。
@wxiir 我想你误解了我说的话。它与父元素的大小无关，它与父元素的字体大小有关。
是的，我真的没看懂你说的，对不起。但无论如何，如果我现在理解它仍然是错误的。如果文本或父元素具有绝对字体大小而另一个具有相对字体大小，则绝对优先，如果两者都具有绝对字体大小，则父元素字体大小将优先，如果两者都具有相对字体大小可能是由浏览器或一些废话确定的默认字体大小，因此字体会根据浏览器调整大小

【解决方案2】：

这个问题的另一个解决方案是使用流畅/响应式 CSS 框架，然后使用 媒体查询 根据浏览器的宽度调整字体大小，以确保它看起来很棒永远可能的宽度。

举几个例子：

1140 格 (http://cssgrid.net/)

骷髅 (http://www.getskeleton.com/)

或我目前正在工作的一个 (https://github.com/gogogarrett/Muscle)

希望这会有所帮助。

【讨论】：