Media Query
Goal
- âš¡ Learn media query
What is media query ?
info
Media query is really important CSS features to change styles depending on device screen width.
Basic media query syntax
/* if your browser's viewport width is equal to or widder than 480px */
@media screen and (min-width: 480px) {
/* write CSS here */
/* This CSS is applied only in specified range */
}
You will easily understand this syntax after you tried it!
Try media query
Make media-query.html in css-test folder.
media-query.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px) {
body {
background-color: red;
}
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px) {
body {
background-color: blue;
}
}
/* tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
body {
background-color: yellow;
}
}
/* tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px) {
body {
background-color: pink;
}
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px) {
body {
background-color: orange;
}
}
/* Large screens ---------- */
@media screen and (min-width: 1824px) {
body {
background-color: cyan;
}
}
</style>
</head>
<body>
<h1>Media query Test!</h1>
</body>
</html>
Code Ref: https://www.tutorialrepublic.com/css-tutorial/css3-media-queries.php
Check the output
