xxxxxxxxxx
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}
xxxxxxxxxx
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}
xxxxxxxxxx
/* CSS code for responsive media queries */
/* Styles for devices with a maximum width of 767px */
@media (max-width: 767px) {
/* Add your styles for smaller devices here */
/* Example */
body {
background-color: yellow;
}
}
/* Styles for devices with a width between 768px and 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
/* Add your styles for medium-sized devices here */
/* Example */
body {
background-color: orange;
}
}
/* Styles for devices with a minimum width of 1024px */
@media (min-width: 1024px) {
/* Add your styles for larger devices here */
/* Example */
body {
background-color: pink;
}
}
/* Additional media queries can be added for different device dimensions */