使用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%的屏幕。

我知道的类似技术:

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

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

text-align:证明;

Answer 1

我不知道有什么纯CSS的方法可以做到这一点。我相信你必须使用JS。有几个脚本和插件在那里。这里有一个jQuery:

http://fittextjs.com/

Answer 2

媒体查询可能是最接近您正在寻找的存在的东西。另一个可以搜索的好词是"响应式设计"，在过去几个月我关注的大多数设计师博客中，这是一个相当热门的话题。

Answer 3

你不能。

抱歉。

你可以用javascript编程。