Websites looks different on different screens. A site will looks different on mobile and laptop. This is possible because of media queries. Media queries are used to make the site responsive. We can use max-width and min-width with media queries. When we want our site to change its view we add breakpoint at that size and write our css. We can an as many breakpoints we want in our website. Normally we use four breakpoints.
0-480 px(Smaller Smartphones)
481-768 px(Tablets and larger smartphones)
769-1279 px(Laptops and small desktops)
1280+ px(Larger desktops and monitors)
Syntax
@media media type and (min-width:768px){
css
}
Media Types
If we are not giving a media type. Then by default all type of devices will be selected. Media type comes right after the @media rule. They are mainly 4 kind of devices.
1. all
It is used to select all media types.
2. print
It is used for printers.
3. screen
It is used for smart phones, computer screens and tablets.
4. speech
It is used for screen readers that reads a page aloud.
Max Width Vs Min Width
1. max-width
The css written inside max-width will only apply till that width. For eg if we write max-width 480 px then css will work from 0- 480 px only.
Syntax
@media (max-width:480px){
css
}
Eg.
In the given eg the css inside @media (max-width: 600px) will be applicable only till 600px. i.e (0-600px).
2. min-width
The css written inside min-width will only apply after that width. For eg if we write min-width 480 px then css will work from 480 px and above.
Syntax
@media (min-width:480px){
css
}
Eg.
In the given eg the css inside @media (min-width: 600px) will be applicable only after 600px.
Combining max-width and min-width
We can combine both the max width as well as min width to target a specific device size.
Syntax
@media (max-width:800px ) and (min-width:650px){
css
}
Eg.
In the given eg the css inside @media (max-width: 800px) and (min-width:600px) will be applicable only between 600px and 800px.
Thank you for reading. Will be back with new blogs....