1

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.)

Community
  • 1
  • 1
cnst
  • 25,870
  • 6
  • 90
  • 122

1 Answers1

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;
 }
Yann Chabot
  • 4,789
  • 3
  • 39
  • 56
  • 1
    Wrapping this into media query would be a good idea, because on small screens it may go too small. – Maciej Kwas Apr 30 '15 at 16:42
  • cool! having one `@media` query is better than having several, thanks! (it's also probably better to have it within `@media` for those older browsers that would have no idea what it is.) – cnst Apr 30 '15 at 17:14
  • I've posted a follow-up question at http://stackoverflow.com/questions/30175730/how-to-properly-use-css-values-viewport-relative-lengths. It seems like it's not very obvious how to ensure that font-size in `vw` units won't end up being below `1em`. – cnst May 12 '15 at 00:31