Responsive Web Design

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 the user is visiting the site with and serve up a layout optimized for this device type.

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

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

 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 the rule inside the media query is ignored.

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

The syntax could be 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.