responsive css grids

Out of context: Reply #3

  • Started
  • Last post
  • 17 Responses
  • wanda9

    yeah it's sharp but i'm pretty much going to have to embed a second, float-based grid system if I ever want to use it, since flex and calc() are not supported everywhere yet.

    relative units are em and rem.
    e.g. .some-class { font-size: 1em }

    they take the root font size as a root value and scale up and down in proportion to it, so in 90% of cases:
    .5em = 8px, 1rem = 16px, 1.5em = 24px, etc.

    so what's the advantage?

    consider the grid system and the spacing between blocks.

    if the user changes their root browser text-size, a pixel-defined website's text will change in size, but the spacing between grid blocks will not.

    if you use relative units to define the spacing between the blocks, in which case the spacing will increase proportionately to the increase in the font-size.

    relative units also make sense in media queries for the same reason. because they scale proportionately relative to the browser text size, it means that media queries fire correctly when zoom conditions are changed. try zooming in on websites with px and em based media quieries. websites using em-based media queries will respond correctly while zooming in 500% on a px-based media query website will have... unfortunate results.

    all that said, we are talking about edge cases. pixels will serve pretty well most of the time and I still use them for quickie projects, especially if I have to support an ancient browser, but generally I prefer to work with relative units because they make more sense to me.

    rem is obviously the easiest to work with but I don't think it's supported in IE9--though I made this grid with the expressed purpose of appealing to modern browsers anyway so.

    wanda 9Permalink
    UpvoteDownvote
    Flag
    Show [[ numHiddenNotes ]] more notesAdd Note
    SaveCancel

View thread