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

Question

我在如何使文本动态增长和缩小以使页面始终完美适合以使各种单词组总是占据各种屏幕尺寸的全宽度时，我正在画一个空白。

我现在正在使用手机浏览器，如果我不发布完整的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％。

我所知道的类似技术：

字体拉伸//除了它只是压缩/拉伸文本而不考虑文本容器

字体：5％; //除了这个处理每个字母的垂直刻度。

文本对齐：证明; //除了它只是添加空格而不是放大字体。

Answer 1

我不知道用CSS来实现这个目标。我相信你必须使用JS。那里有几个脚本和插件。这是jQuery的一个：

http://fittextjs.com/

Answer 2

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

Answer 3

你做不到。不是用css。

对不起。

你可以用javascript编写一些东西。