使用 html 和 css 的字体大小问题
当我构建第一个全 html/css 网站时，我使用可点击的图像作为菜单，并且每个图像和 div 都以 % 缩放，因此它可以很好地适应所有显示器和浏览器，而且确实如此。
现在在一个新项目中，我想使用整个页面的背景图像（上面有菜单按钮但没有文本）来制作网站菜单，然后在图像顶部使用超链接文本，这样它看起来就像一个正确的菜单。
所以我想，如果我只是把字体大小放在%中，它可能会随着浏览器窗口显示部分的大小增加或减少而完美地缩放，它与其他所有东西都完美地配合，所以为什么现在不应该工作...
我已经做到了，但它不起作用，我不知道这个东西到底从哪里得到它的百分比，如果我在一个 div 中设置 100% 字体大小，其大小为 2% 或 3%文本取决于分辨率的页面太大或太小。
我知道如何根据浏览器窗口使内容可缩放，但是如何根据该内容或浏览器窗口本身使文本大小可缩放？
一个回答告诉我如何仅使用 css 和 html 来做到这一点，这对我来说更好，我知道一些脚本，但我不喜欢将显示部分与脚本部分混合，所以如果你们有人知道如何仅使用 html 来做到这一点/css 我将继续使用可点击的图像和百分比或像素来完成整个事情。
谢谢。
when i built my first all html/css website i used clickable images as a menu and every image and div scaled in % so it would adapt extremely well to all monitors and browsers, and it did.
now on a new project i wanted to do the website menu using a background image for the whole page (with the menu buttons on it but with no text) and then hyperlinked text on top of the image so it would look like a proper menu.
so i though, well if i just put the font-size in % it will probably scale perfectly as the size of the display part of the browser window increases or decreases, it worked so perfectly with everything else so why shouldn't it work now...
i've done it and it doesn't work, i don't know where in hell the thing get it's percentages from, if i set 100% font size in a div that has 2% or 3% the size of the page the text depending on the resolution will be too large or too small.
i know how i can make the things scalable according to the browser window, but how i can make text size scalable according to that thing or the browser window itself?
a response telling how to do this using only css and html it's better for me, i know a bit of scripting but i don't like to mix the display part with the script part so if you anybody knows how to make this using only html/css i will continue to use clickable images and percentages or pixels for the whole thing.
thank you.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
font-size不是这样工作的。font-size是相对于其父元素的 font-size 的大小。在 CSS 中，您无法根据窗口宽度调整字体大小。不过，在 Javascript 中可以计算。
font-sizedoesn't work that way.font-sizeis a size relative to the font-size of its parent element.In CSS, you cannot resize fonts according to the window width. However, this is possible to calculate in Javascript.
此问题的另一个解决方案是使用流畅/响应式 CSS 框架，然后使用媒体查询根据浏览器的宽度调整字体大小，以确保它在可能的宽度下看起来很棒。
几个例子是：
1140 grid (http://cssgrid.net/)
Skeleton (http://www.getsculpture.com/)
或我目前正在工作的一个 (https://github.com/gogogarrett/Muscle ）
希望这有帮助。
Another solution to this problem would be to use a fluid / responsive CSS framework, and then use media queries to adjust the font size depending on the width of the browser to make sure it looks great at ever possible width.
A few examples would be:
1140 grid (http://cssgrid.net/)
Skeleton (http://www.getskeleton.com/)
or one I'm currently working (https://github.com/gogogarrett/Muscle)
Hope this helps.