Media Queries in CSS
Ever wondered how websites are built across different devices with different screen sizes? that's the job of media queries. A very powerful feature in CSS that allow us to apply styles based on the characteristics of the user's device, such as screen size, resolution and orientation.
Simply put, media queries are used to style websites based on their sizes.
The way a website looks or structured on your typical laptop screen is not the same on your phone's screen.
Making a website look great and fit for different screen sizes is what we call "responsiveness".
let's look at some basic use of media queries:
- For screens smaller than 768px
`@media (max-width: 768px) {
body {
background-color: lightblue;
}
}`
- For screens larger than 768px
`@media (min-width: 769px) {
body {
background-color: lightgreen;
}
}`
- For landscape orientation
`@media (orientation: landscape) {
body {
font-size: 18px;
}
}`
- For portrait orientation
`@media (orientation: portrait) {
body {
font-size: 16px;
}
}
`
It is very important that your website is responsive because your target users will use different devices with different sizes to access your site.
#keeplearning
#keepbuilding
#webdev
