Responsive Design

What is Responsive Design?

Responsive design is a web design approach in which a webpage adjusts to fit the screen size, orientation, and platform of the viewing device. It is also called responsive web design. 

Before responsive design became standard practice, site owners maintained different webpages for different platforms. So, a site would have the homepage of its desktop version at example.com and the homepage of its mobile version at m.example.com.

However, with responsive design, site owners only need to have and maintain one webpage for all users. A site can be made responsive by including media queries in its CSS code. For example:

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }

  .container {
    width: 90%;
    margin: 0 auto;
  }
}

The above media query instructs the browser to apply the following CSS styles when the screen width of the viewing device is 768 pixels or less:

• Set the font size of the body to 14px
• Set the width of the container to 90% 
• Set the container to center horizontally