有没有办法用CSS来放大字体来适应屏幕？ [英] Is there a way to up-size the font with CSS to fit the screen?

问题描述

我在考虑改进 OpenBSD ports 网站的首页，该网站列出了71个类别的端口。

I'm thinking about improving the front page of the OpenBSD ports web-site, which lists about 71 categories of the ports.

我的想法是使用几列（也许 ul {-moz-columns：9em;} 在89em及以上，最多8列的限制， @media（min-width：89em）{ul {-moz-columns：8;}} ，有效地指定至少应该有 8 列的最小宽度 9em ），并添加一些 padding / 保证金列出了一个端口，但是在更大的屏幕上，这可能占用的屏幕太少，留下太多空的空间。

My idea is to use a couple of columns (maybe ul {-moz-columns: 9em;} also with a limit to at most 8 columns at 89em and above, @media (min-width: 89em) {ul {-moz-columns: 8;}}, effectively specifying that there should be at most 8 columns with a minimum width of 9em), and add some padding/margin to each list item listing a port, but on bigger screens, this might occupy too little screen and leave too much empty space.

有没有办法自动扩大某些元素的字体，以填充所有可用空间，但不会影响大小一些其他元素？例如，我希望标题和分类大小适中，但将页面底部的所有积分保留为正常字体。我正在寻找一个仅限CSS的解决方案。 （我想我可以在一些特定的 @media 规则中加入一些规则，但我很好奇是否有更灵活和自动化的解决方案。）

Is there a way to automatically upsize the font of certain elements, to fill up all the available space, but without effecting the size of some other elements? For example, I'd like to have the heading and the categories up-sized, but leave all the credits at the bottom of the page in their normal font. I'm looking for a CSS-only solution. (I guess I could place in a couple of specific @media rules for a few jumps up a size, but I was curious if there's a more flexible and automated solution.)

推荐答案

我想这就是你要找的： http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

I think this is what you're looking for: http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

您可以vw（视口宽度）或wh（视口高度），其中1 v == 1％的初始包含块

You can you vw (viewport width) or wh (viewport height) where 1 v == 1% of the initial containing block

示例：

 p{
     font-size: 4vw;
 }

这篇关于有没有办法用CSS来放大字体来适应屏幕？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！