join: new@juude



get alerts for new articles






CLOSE WINDOW

join: new@juude



get alerts for new articles






CLOSE WINDOW
css: casscading style sheets

Responsive Web Design



Media Queries - Breakpoints


First decide on the breakpoints you will use in your CSS, for example: 980px, 768px, 600px; 480px. Although these are key widths for various devices there are a lot more sizes than those I have listed. There are numerous sizes for cell phones some with widths as narrow as 280px. You need for your design to be able to transition from one size to another smoothly for this you need to use percentages.

Percentages

In order for your site to work on all devices regardless of their size you need to start by using percentages for all widths.

For the box model the size of all elements, width, padding, margin can be expressed using percentages except for the size of a border. If you do decide to add a border the total of all elements cannot have the sum of 100%, it needs to be a little less depending upon the width of the border. You can also express your percentages using decimals to be even more precise.

First Breakpoint


This page has a wrapper as shown below. Which is initally set-up so that the contains will appear in the center of the browser

 

#wrapper{

position: relative;

width: 1024px; (this could be wider)

margin-right: auto;

margin-left: auto;

}

 

For the first breakpoint I am using 980px:

@media (max-device-width : 980px) {
#wrapper{

width: 96%;

margin-left: 2%;

margin-right:2%;
}
}


At this point we probably will not have to change any of the other sizes because as they are also percentages they will just resize to fit the wrapper as the wrapper resizes. For example the two main columns on this page which have the ids left and right have the styles as shown below.

#left {
float: left;
width: 48%;
padding-right: 2%;
}


#right {
float: right;
width: 48%;
padding-left: 2%;
}

These measurements will probably only need to be changed for the phone in which case you will need to get rid of the float and increase the width of each as shown below:

Set-up the break-point to 480px;

@media (max-device-width : 480px) {

#left {
float: none;
width: 96%;

padding-left: 2%;
padding-right: 0%;
}


#right {
float: none;
width: 96%;
padding-left: 2%;
}

}

The examples shown are extreamly simplified. At certain breakpoints you will need to make changes to the header, menus and footer as well as other elements within the page.

Text

h2>
You should use em as a font size and either state the font-size in pixels in the body or 100%. The default on most browers is 16px therefore 16px equal 100%.
This site is set at:

body{
font-size: 20px;
}

The rest of the styles are in em. if necessary I can change the font-size for the body at each breakpoint and the rest of the text will change accordingly.