1. Meta viewport tag
This is where any responsive site starts by setting the width according to the reported device width.
<meta name="viewport" content="width=device-width, initial-scale=1;">
2. The media query
Then the browser transfer the device screen pixels to the pixels we can use in media query in our CSS file. Media query return true or false after evaluating one or multiple expression. if it returns true, the styles with that media query are applied. Now, we will create a media query that applies styles only to any screen less than 320px width.
@media only screen and (max-width: 320px){
/*--- for devices with 320px width maximum --*/
}
3. Best practice with em unit
Being responsive design means becoming pixel independent. Sometimes, a pixel is not really a pixel in the world of devices. An iPhone as an example: it reports the device width as 320px although its actual width is 640px. So, it does not make sense of using pixels except when using with raster images. To convert from px to em unit, divide the pixel amount by 16 - so 320px /16 gives 20em and we will change 20em in our media query instead of 320px.
@media only screen and (max-width: 20em){
/*--- for devices with 320px width maximum --*/
}
4. Mobile first
It is a concept called mobile first in RWD, which defines the small-width layout as the starting point. So, we will often use min-width instead of max-width to make sure each media query stands on top of each other. For example: starting with the smallest one column layout and working up to traditional desktop width.
It is a concept called mobile first in RWD, which defines the small-width layout as the starting point. So, we will often use min-width instead of max-width to make sure each media query stands on top of each other. For example: starting with the smallest one column layout and working up to traditional desktop width.
@media only screen and (min-width: 20em){
/*--- for devices with 320px width minimum --*/
}
