Lets start this off with some Media Query Basics. Media Queries are from the CSS3 spec and are very powerful for allowing content rendering to adapt to the browser and device. This content rendering to different size devices is what is referred to as “responsive”.
With the rise of smart phones and tablets, it’s crucial that all websites are designed by to be responsive since most websites will currently have approximately half their traffic coming from smart phones. Simply put responsive websites are sites that automatically size and adapt to the screen size of the device viewing it whether it’s a desktop Mac or PC, a tablet or a smart phone. Responsive web design is accomplished using Media Queries.
Media Queries are found in your site’s style sheet and instruct divs, classes and other elements how to respond to different screen sizes.
Below is an example of a layout which has two columns side-by-side at a device screen width above 600 pixels, but with devices below 600 pixels it will display one column.
When at or above 600px the navigation (.simplenav) floats left and has a width of 25%. When below 600px the nav doesn’t float left, doesn’t have a set width and the display is set to inline.
@media screen and (min-width:600px) {
.samplenav {
float: left;
width: 25%;
}
.samplesection {
margin-left: 25%;
}
}
@media screen and (max-width:599px) {
.samplenav li {
display: inline;
}
}
Below is an example of a class that changes perameters based on the screen size viewing it. At a device screen width of 600 pixels or above the class sizes the element to 300 x 250 but with a device screen size below 600px the CSS defines the element to be 150 x 50 px in size.
@media screen and (min-width:600px) {
.sampleblock {
width: 300px;
height: 250px;
}
}
@media screen and (max-width:599px) {
.sampleblock {
width: 150px;
height: 50px;
}
}