When we talk about the difference between Responsive Design we are talking about 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 Media Queries are the part of the CSS that check for criteria (like the screen being 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 be 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 can look 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 .
When we refer to the visible area of the website we talk about the viewport.