问题
I'm thinking about improving the front page of the OpenBSD ports web-site, which lists about 71 categories of the ports.
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.
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.)
回答1:
I think this is what you're looking for: http://dev.w3.org/csswg/css-values/#viewport-relative-lengths
You can you vw (viewport width) or wh (viewport height) where 1 v == 1% of the initial containing block
Example:
p{
font-size: 4vw;
}
来源：https://stackoverflow.com/questions/29972851/is-there-a-way-to-up-size-the-font-with-css-to-fit-the-screen