Responsive Web Design (RWD) is the use of HTML and CSS to automatically resize, hide, shrink, or expand a website, to make it look great on all devices (desktops, tablets, and phones).
Mobile-first approach
It is about starting the design of the product first for a mobile version which includes the most basic functions and then we move on to the advanced version for tablet or PC.
This Mobile First approach avoids loss of content when moving from a larger screen to a smaller screen.
Indeed, if we take the design of the mobile end product as a starting point, under restrictions such as bandwidth,
screen size, etc., designers will naturally grab the key points of a product to turn to a sober and neat product with priority features.
Also since 2016, we know that mobile internet usage surpassed desktop usage in 2016.
Use media queries
It is CSS technology based on media-queries that allows this adaptation.
The principle is simple: from a certain screen size, we apply a specific CSS to switch the presentation: this is called a breaking point.
With the code below, CSS code will be executed as soon as the screen size is greater than or equal to 600px:
@media screen and (min-width: 600px) {
/* css to execute */
}
For example, we will change the background color of the page (blue) as soon as the screen size is greater than 600px:
@media screen and (min-width:600px{
body{
background-color: red;
}
})
Media queries and Mobile First
In a Mobile First approach, we must first create the CSS for mobile formats and then use media-queries for larger screens (desktop).
Hence the use of the min-width instruction which means greater than or equal.
Continuing the example above, we are going to change the content of the page in relation to the size. We will use display: none to hide inappropriate content.
/* CSS pour le format mobile */
#desktop{
display: none;
}
#mobile{
display: block;
}
/* CSS pour les grands écrans */
@media screen and (min-width:600px){
#mobile{
display: none;
}
#desktop{
display: block;
}
})
Notice that the mobile CSS is done first.
Add viewport meta tag
If you want to give instructions to the browser on how to control the dimensions and scaling of the page, you must add in HTML in the <head> part the following meta tag:
The HTML <picture> tag allows you to define different images for different screen sizes. In the example below the content of the image changes when you are on a large screen
<picture >
<source media="(min-width: 650px)"
srcset="https://googlechrome.github.io/samples/picture-element/images/kitten-large.png">
<source media="(min-width: 465px)" srcset="https://googlechrome.github.io/samples/picture-element/images/kitten-medium.png">
<!-- img tag for browsers that do not support picture element -->
<img src="https://googlechrome.github.io/samples/picture-element/images/kitten-small.png" alt="a cute kitten">
</picture>
Notice the media="(min-width: 500px) syntax which sets the breakpoint to 500px.
We also add, as seen previously, the CSS to adapt the image according to the size of the screen:
EN 
Español - ES 
Français - FR 
