HTML: How to do Responsive Web Design in 1 Minute

The Basics of What You'll Need for Responsive Web Design

You know HTML.
You know CSS.
You don't know Responsive design.

It's easy to understand.

Use CSS to Define Different Screen Styles

Start with a default style, then go from widest to narrowest

Responsive designs are usually based on width of the browser, or the width of the device's "screen." A cell phone has two screen widths -- the portrait view and the landscape view. A desktop browser could have any dimensions, right? So, your responsive design will react to a few approximate guesses at which dimensions a user's screen might be -- HD, laptop, tablet, cellphone.

First, you'll make a default style sheet.

• Create a CSS3 style sheet just like you normally would.

Then, at the bottom of the CSS, you will define specific styles for different screen sizes. These styles could be either new, additional definitions, or they could override the default definitions.

So, the logic goes something like this:

1. Default style definitions (for all screen sizes)
2. Very wide styles (between x and y pixels)
3. Medium width styles (between y-1 and z)
4. Narrow width styles (anything smaller than z-1)

The code will be structured like this:
<style>
/* 1. SPECIFY DEFAULT STYLE HERE */
/* FOLLOWED BY DESCENDING WIDTHS OF 
   SCREEN SIZE STYLES, LIKE THIS: */
@media screen and (max-width: x) and (min-width: y) {
  /* 2. SPECIFY WIDE STYLES HERE */
}
@media screen and (max-width: y-1) and (min-width: z) {
  /* 3. SPECIFY MEDIUM STYLES HERE */
}
@media screen and (max-width: z-1) {
  /* 4. SPECIFY NARROW STYLES HERE */
}
</style>

-----

That's it.

Now you mix-n-match CSS styles to make elements realign themselves, disappear or become visible, change font sizes and colors, etc.

-----

This working example of code changes the color and size of the headline when the screen width changes.

See the working example.

<style>
/* DEFAULT (ALL SCREEN SIZES) */
h1 { 
color: green;
font-size: 2em; 
}
    
 /* SCREEN WIDTH BETWEEN 767 AND 600 PIXELS */
@media screen and (max-width: 767px) and (min-width: 600px) {
h1 {
 color:blue; 
 font-size: 1.75em;
}
}

 /* SCREEN WIDTH BETWEEN 599 AND 480 PIXELS */
@media screen and (max-width: 599px) and (min-width: 480px) {
h1 {
 color:orange;
 font-size: 1.5em;
}
}

 /* ANY SCREEN WIDTH BELOW 480 PIXELS */
@media screen and (max-width: 479px) {
h1 {
 color:red;
 font-size: 1.25em; 
}
}
</style>