Responsive Web Design is done utilizing CSS break points
Responsive web design is making 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 quieries
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 devices 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.
Break points
Overtime I have started to use a set list of breakpoints and I'm going to teach you how to use them.
In your CSS file once you have finished designing your desktop version of your site at the bottom on your CSS file you will want to start doing your responsive CSS. Here is an example of the breakpoints that I typically use. Feel free to copy and past this into your own file.
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 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:
Responsive Web Design is just that easy
Use the above examples to help you get a better understanding of responsive web design. The trick is to think in percentages and not fixed pixel widths.
