How to Create Responsive Layout using Media Queries - CSS3

by Didin J. on Dec 29, 2016 How to Create Responsive Layout using Media Queries - CSS3

How to Create Responsive Layout using Media Queries using CSS3 that fits all screen size of desktop, mobile phone and tablet.

How to Create a Responsive Layout using Media Queries using CSS3? previously we have created a basic layout using CSS3. Now, we are creating a responsive layout for various mobile phone, tablet and desktop using media queries. CSS3 Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution. A media query consists of a media type and one or more expressions, involving media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.

Table of Contents:

Take a look at this example of a full desktop layout with screen resolution 1440x720 pixels.

Full Desktop Layout

And see what happened when the screen size decreases to 800x600 pixels.

Small Desktop Layout

Yes, you are right. This layout has too many lost in every dimension. This is why we will using media queries to make a different layout base on screen width.


Desktop with Low Resolution (800 pixels width)

For desktop with low resolution 800x600 pixels, just add new lines in the current CSS file.

@media (max-width: 800px){
  body{
    width:780px;
    margin:15px auto;
  }
}

Now, it looks better like this.

Responsive Small Desktop


Phone and Tablet with Portrait Orientation on High Resolution (414 pixels width)

For phone and tablet with high resolution on portrait orientation, just add these lines.

@media (max-width: 414px){
  body{
    width:100%;
    margin:15px auto;
  }

  header#page-header nav ul li {
    display: block;
  }

  section#main-section, section#rightnav-section {
    width: 94%;
    margin: 2%;
  }
}

This code will change the nav button arrange vertically and right navigation will move to bottom after the main section.

High Res Mobile

Phone and Tablet with Portrait Orientation on Low-Resolution width (320 pixels width)

Last, for low-resolution phone and tablet with portrait orientation. We will arrange all section vertically.

@media (max-width: 320px){
  body{
    width:100%;
    margin:15px auto;
  }

  header#page-header nav ul li {
    display: block;
  }

  section#main-section, section#rightnav-section {
    width: 94%;
    margin: 2%;
  }

  section#main-section article aside {
    display: block;
    width: 100%;
  }
}

And here the result on the screen.

Low Res Mobile

What do you think? Is that too easy?

That just the basic. If you need more deep learning about HTML, CSS, Javascript or related you can take the following cheap course:

Thank You

Loading…