Gordon's Responsive Design Tutorial

Part 1 Preparing for responsiveness - Getting start with body

1.1 Checking the position/width/height of body with a border

body {
  border:1px solid red;
}
Try It Yourself

Note: This border is for aiding purpose only. It should be removed at last.

1.2 Using viewport units for sizing body

body {
  width:100vw;
  height:100vh;
}
Try It Yourself

Note: Learn more about viewport units

Note: It branches out here, min-height: 100vh is better if the overflow-y of step 3.1 is not followed.

1.3 Getting rid of the white edge

body {
  margin:0;
}
Try It Yourself

Note: vw is percentage of viewport width, vh is percentage of viewport height.

1.4 Getting rid of oversize due to border

* {
  box-sizing:border-box;
}
Try It Yourself

Note: Learn more about * and box-sizing

Part 2 Basic responsiveness - Layout and font

2.1 Begin with three sections, each is a div with different id

  <div id="header"></div>
  <div id="container"></div>
  <div id="footer"></div>
Try It Yourself

Note: These borders are for aiding purpose only. They could be removed at last.

2.2 Setting height to each section

#header{
  height:10vh;
}
#container{
  height:85vh;
}
#footer{
  height:5vh;
}
Try It Yourself

2.3 Handling the fonts

@media only screen and
    (orientation:portrait){
  body{
    font-size:3vh; 
  } 
}

@media only screen and
    (orientation:landscape){
  body{
    font-size:5vh; 
  } 
  #footer{
    height:10vh;
  }
  #container{
    height:80vh;
  }
}
Try It Yourself

Note: In protrait view we want normal font size, on landscape view we want smaller font size.

2.4 heading - make it a class, and use em as font-size

.heading{
  font-size:1.2em;
  font-weight:bold;
}
Try It Yourself

2.5 Handling oversized fonts - Setting maximum

@media only screen and (orientation:portrait) and (min-height:600px){
  body{
    font-size:18px;
  }
}

@media only screen and (orientation:landscape) and (min-height:400px){
  body{
    font-size:20px;
  }
}
Try It Yourself

Part 3 Further responsiveness - Different layout of subsections for different screen width

3.1 Overflow

#container {
  overflow-x:scroll;
  overflow-y:scroll;
}
Try It Yourself

3.2 Sub-sections in #container

<div class="subsection"></div>
<div class="subsection"></div>
<div class="subsection"></div>
Try It Yourself

3.3 Checking the overflow of sub-sections

(height is not necessary,
set only for demo scroll)
Try It Yourself

Note: In this view we should let subsections follow each other, so height is not necessary, in the example height is set only for demo overflow scrolling.

3.4 Layout varies with screen width

@media only screen and (min-width:500px){
  .subsection{
    display:inline-block;
    width:32.5%; /* Tradeoff aestheticity for compatibility */
    height:100%;
    overflow-y:scroll;
  }
}
Try It Yourself

Note: The above reads as: when the width is larger than 500px, the subsections will be inline element instead of block element, visually they will be beside each other instead of below each other. Rotate the screen to see the effect.

Another responsive design demo by Alyssa Chan