Creating a CSS Grid – Media Queries

We have converted our columns and gutters to percents to adjust to difference screen sizes, but this really only accounts for screen sizes that can contain a traditional webpage without the content being too squished.  Smaller devices like phones need a different alternative.  We need to consider using media queries.

Media queries allow us to create rules that will be defined only for the aspects we allow.  Media queries actually exist for more than just screen sizes.  We can use them for print, tv, color, monochrome, grid, scan, and so many other media types.  We will focus on the width media feature.

We will have to decide the range that we want this grid to be used.  I would suggest 800px and 1200px.  This should keep out some tablets that are a bit too small for our full fledged grid to contain.  So we would write the line

@media (min-width: 800px) and (max-width: 1200px) { enter the grid here}

But now the obvious question is what if the screen is smaller than 800px what will we do?  Now we have some real interesting decisions to make.  How do we want the mobile version to look like?  Do we only want one column for the whole page on smaller versions of the website (pretty common)?  That is where we will go next.

Posted in Blog Posts, Web Development Tagged with: , , ,