Why You Should Opt for Responsive Web Design

There are two web designs: Responsive Web Design and Adaptive Web Design. The significant difference between the two is how the page and its assets are delivered to the browser.

With Adaptive Design, a server-side language could detect the type of device that the user is visiting the site with, and serves up a layout that is optimised for this device type.

Responsive design instead serves up the same HTML/CSS and assets, but it uses CSS to change present a layout that is optimised for that device screen size.

The advantage of Responsive Design is that we create one version of the page that is served up to everyone, but it is the CSS that changes the layout depending on the width of the screen.

 Media Queries are the part of the CSS that check for criteria (like the screen having a certain width) and then apply rules only when those criteria are met.

Here, if the screen is below 400px wide ( max-width: 400px ) then the body background colour rule will override the one set earlier in the stylesheet and change it to red.

If the screen is above 400px wide then rule inside the media query is ignored.

The @media rule allows us to test for conditions and applies CSS rules based on those conditions being met.

The syntax could be a little confusing because the media query opens and closes with curly brackets which looks like a CSS rule.

The Viewport On mobile devices when we talk about the width of the browser it is often the same as the width of the screen, but on desktop screens where we have windows they can be different.

The viewport refers to the visible part of the website