Making your website design responsive can be really difficult if you have static widths on your elements. Responsive design is easiest when you just have everything set to 100% width and let the window just resize the design. But what do you do when you have 3 sizes you want to meet? What if you want to have a design for small screens (like phones) medium screens (like tablets) and large screens (like monitors). The answer lies in CSS media Queries.
What is a Media Query?
A media query is just just a type of "if .. then" statement in CSS. It says if a screen is a certain time, use this set of css definitions for these class (or id) elements. A media query looks like this @media (min-width: 200px) { } Then you put your class definition in between the { }.
Media Queries for Small and Large
To set up media queries for two screen sizes you need to define your ranges. To set up a set of media queries for small screens (like phones) and large screens you can use these media queries to group your CSS definitions.
@media (min-width : 800px) { } / For your Big Layout /
@media (max-width: 799px) { } / For your Small Layout /
These media queries say if your screen is, at minimum, 800 pixels wide, use the big layout definitions, but if the screen is smaller, or at max 799px, use the small layout definitions.
Media Queries For Small, Medium, and Large
To set up media queries for multiple screen sizes you need to add some additional code to the media query. This is more complicated because you have to declare a range of sizes. In this case your media queries will need to look like this
@media screen and (min-width:990px) { / LARGE / }
@media screen and (min-width: 651px) and (max-width:989px) { /MEDIUM /}
@media screen and (min-width: 0px) and (max-width:650px) { / SMALLEST / }
This will make any screen sizes smaller than 650px use the small definitions, anything between 651 and 989 use the medium, and anything from 990 to 4000 use the large layout definitions.
