Coding, Read

Media Queries Made Simple

The further into the future we get, the more we realize just how necessary it is to design websites that are compatible with all screen sizes.  This is where media queries really come into play.  With a bit of fancy CSS, you can use media queries to reconfigure the CSS for a website to fit any screen size.

To figure out how to use them and sizes to start at, here is an example template.  You would code everything as you would for a desktop site, then add the following code:

@media (min-width: 481px) and (max-width:768px) {

   /*put all styles for tablets here */


@media (max-width:480px) {

     /*put all styles for mobile here*/


Any styles written in the media query would override previous styles used for the main site, which is the beauty of cascading stylesheets.  Alternatively, you could also create separate stylesheets for each version by linking to them based on screen size.  This is the method I prefer to use.

@import url(css/main.css);
@import url(css/tablet.css) (min-width:481px) and (max-width:768px);
@import url(css/mobile.css) (max-width:480px);

Note that in this example the main.css page does not have a screen size qualifier.  This is because it will load all of the main styles–font and colors for example–that will be used throughout the rest of the stylesheets.  The individual tablet and mobile styles will only change layout preferences and size as needed.




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s