使用 css 在屏幕上 100% 拉伸文本导航元素答案

【问题标题】：Stretching text navigational elements 100% across the screen with css使用 css 在屏幕上 100% 拉伸文本导航元素
【发布时间】：2011-07-20 11:21:13
【问题描述】：

我对如何使文本动态地增长和缩小以始终完美地适应页面以使各种词组始终占据各种屏幕尺寸的整个宽度。

我现在正在使用手机浏览器，如果我没有发布完整的 html 示例，请原谅，但这里是我正在尝试使用一种技术来解决的常见场景的要点：

<div>
<div>
<a>nav element</a> <a>another</a><a>lots of text in this nav element</a>
</div>
<div>
 ... another set of links wwith different text here ... 
</div>
<div>
... and another ...
</div>

</div>

总而言之，以上布局在任何屏幕尺寸或窗口尺寸上都将占据整个屏幕的三行。

一个更简单的例子：

<h1>Hello World</h1>

其中不仅 h1 具有 100% 的屏幕宽度（简单），而且文本内容本身的字体大小也会增大以适应 100% 的屏幕。

我知道的类似技术：

Font-stretch // 除了它只是挤压/拉伸文本而不考虑文本容器

字体大小：5%； // 除了这个处理每个字母的垂直比例。

文本对齐：对齐； // 除了它只是增加空间而不是放大字体。

【问题讨论】：

标签： html css layout

【解决方案1】：

我不知道有一种纯 CSS 方式来实现这一点。我相信你必须使用JS。为此有几个脚本和插件。这是 jQuery 的一个：

http://fittextjs.com/

【讨论】：

是的，我想我可以求助于 js，我很惊讶任何人都可以构建漂亮的导航，而无需以基于百分比的方式拉伸文本。不知道专业人士如何使任何事情看起来都正确。我想知道 css3 是否对此有任何帮助，因为我什么都没听说过。
嗯，是的，但不是-第一件事-。在依赖 js 用户代理之前，他们必须先对其布局做一些事情以使其正常工作。
是和不是。 JS 是一个非常有效的工具，有时使用一点点 JS 比使用大量 CSS 更实用。当然，这一切都取决于网站。

【解决方案2】：

Media queries 可能是最接近您正在寻找的东西。另一个值得搜索的好词是“响应式设计”，在过去几个月我关注的大多数设计师博客上，它都是一个相当热门的话题。

【讨论】：

这不是所要求的。问题是如何让字体大小动态缩放以使文本充满容器。
是的，这就是为什么我说它是 CSS 中最接近的东西。

【解决方案3】：

你不能。不使用 css。

对不起。

您可能可以使用 javascript 进行编程。

【讨论】：