使用html和css的font-size问题

时间:2011-08-30 19:15:59

标签: html css menu screen-resolution font-size

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

现在在一个新项目中,我想使用整个页面的背景图像(其上有菜单按钮,但没有文本)进行网站菜单,然后在图像顶部添加超链接文本,使其看起来像一个适当的菜单。

所以我虽然如此,如果我只是将字体大小放在%中它可能会完美地缩放,因为浏览器窗口的显示部分的大小增加或减少,它与其他一切完美地工作,所以为什么不应该它现在有用......

我已经完成了它并且它不起作用,我不知道在这里它的百分比来自于,如果我在一个div中设置100%的字体大小,其大小为2%或3%根据分辨率,文本的页面太大或太小。

我知道如何根据浏览器窗口使事物可扩展,但我如何根据该事物或浏览器窗口本身使文本大小可扩展?

一个回复告诉如何只使用css和html这对我来说更好,我知道一些脚本但我不喜欢将显示部分与脚本部分混合所以如果有人知道怎么做这个仅使用html / css,我将继续使用可点击的图像和百分比或像素。

谢谢。

2 个答案:

答案 0 :(得分:2)

font-size不起作用。

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

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

答案 1 :(得分:1)

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

一些例子是:

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

Skeleton(http://www.getskeleton.com/)

或我正在工作的人(https://github.com/gogogarrett/Muscle)

希望这有帮助。