The @media screen rules are used to create responsive design in CSS so that web pages render the best appearance and layout on different devices. You can define different CSS rules to apply different styles within a specific range of screen sizes.
Here is a simple example:
/* default style */
body {
font-size: 16px;
background-color: white;
color: black;
}
/* when screen width is less or equal to 768px */
@media screen and (max-width: 768px) {
body {
font-size: 14px;
background-color: lightgray;
}
h1 {
font-size: 24px;
}
}
/* when screen width is larger or equal to 1200px */
@media screen and (min-width: 1200px) {
body {
font-size: 20px;
background-color: beige;
}
}
0 Comments