Responsive Web Design is done utilizing CSS breakpoints
Responsive web design makes a website scalable for certain devices. It uses CSS media queries to accomplish this. Since style sheets are cascading, you basically overwrite your own CSS settings to make elements flow onto the page on smaller screen sizes.
The basics: Initial Scale meta & @media queries
When designing responsively, the first thing you need to do within the <head></head> tag of yout html5 document is to set your viewport to an initial scale of 1 within your page with the following HTML: <meta name="viewport" content="width=device-width, initial-scale=1">. This will override your device's view settings. Allowing you to see a pixel in its true scale on any of your devices. Once you have that in place, you can start using the @media query within your CSS to overwrite your CSS. There are plenty of sites out there offering tutorials, which is how I taught myself. The hardest part is knowing when to break your design and overwrite it with CSS.
Breakpoints
Over time, I have started to use a set list of breakpoints, and I'm going to teach you how to use them.
Once you have finished designing your desktop version of your site, at the bottom of your CSS file, you will want to start writing your responsive CSS. Here is an example of the breakpoints that I typically use. Feel free to copy and paste this into your own file.
/* RESPONSIVE CSS */
@media only screen and (max-width:1199px) {
/* medium desktop responsive queries go here
}
@media only screen and (max-width:1024px) {
/* landscape view tablet responsive queries go here
}
@media only screen and (max-width:991px) {
/* small desktop responsive queries go here
}
@media only screen and (max-width:768px) {
/* portrait view tablet responsive queries go here
}
@media only screen and (max-width:767px) {
/* general mobile phone responsive queries go here
}
@media only screen and (max-width:375px) {
/* older portrait view mobile phone responsive queries go here
}
@media only screen and (max-width:320px) {
/* older portrait view mobile phone responsive queries go here
}
You then basically overwrite any element you want to have a different look from your desktop settings. For instance, if you had 2 columns on a desktop with a class of .column1 & .column2 that were both set to width: 50%; float: left; And you wanted it to be one column stacked on mobile, the following code would be your media query:
@media only screen and (max-width:767px) {
/* general mobile phone responsive queries go here
.column1, .column2 {
float: none;
width: 100%;
}
}
Responsive Web Design is just that easy
Use the examples above to better understand responsive web design. The trick is to think in percentages and not fixed pixel widths.
