First steps into resposive development - Media queries

So now that you are into responsive design you realize that you would like to have different media style sheets for different screen sizes, I mean, while taking advantage of the precision of a mouse on the big screens by having your buttons at a regular size you would probably want to make them bigger on the smaller screens.

One clear and easy way to do that is by applying different style sheets to different devices, now when this can be achieved by many different ways, one of the preferred are media queries. 

What is a media query? Easy, you can check its description in wikipedia but as a short summary you can basically add a "query" to your site that will select the proper style sheet depending on the filter of the media type you use

As an example, if you would want to apply a style sheet bigscreens.css only when the screen size is at least 480px you should use the following:

<link rel="stylesheet" media="screen and (min-width:480px)" href="bigscreens.css">

That was just an example and media queries are much more extensive, you could check on the Wikipedia link for a deeper introduction of its scope and this nice explanation of its usage from MDN.

Another option to accomplish the same purpose would be to use the @media tag on your CSS style sheet, both are valid options but this latest one will get you into bigger CSS files while the first option will divide your styles into multiple small files only requested if required. 

For example, if you want to change the background color of the body on screens smaller that 480px you should use something like:

@media screen and (max-width: 480px) {
    body {
        background-color: orange;
    }
}

 

Category