CSS Theory - Media Query
Notice! *These posts are basically my learning notes.*
There can misinformation and mistakes :(
If you find any wrong info, please leave a comment and I will get to it asap!
Media Queries
Setting up Media Query
- Using Media Query, you can detect the screen size of the user
- And depending on that, you can show different CSS
<body>
<div></div>
</body>
div {
width: 200px;
height: 200px;
background-color: teal;
}
@media screen and (max-width: 600px) {
div {
background-color: tomato;
}
}
- Above code will show the user a box with color teal when screen width is larger than 600px
- But as soon as the screen width is smaller than 600px, box color will change to tomato
More Conditions
- other than
min-widthandmax-width, you can also add more conditions orientation: landscapeandorientation: portraitdetects which orientation the viewer’s phone is in- MDN
Leave a comment