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
/* Define breakpoints using media queries */
@media screen and (max-width: 600px) {
/* Styles for screens with a maximum width of 600px */
}
@media screen and (min-width: 601px) and (max-width: 1024px) {
/* Styles for screens with a width between 601px and 1024px */
}
@media screen and (min-width: 1025px) {
/* Styles for screens with a minimum width of 1025px */
}
/* Example usage for a specific element */
.my-element {
/* Styles for the element in general (not considering breakpoints) */
/* Styles for screens with a maximum width of 600px */
@media screen and (max-width: 600px) {
/* Custom styles specific for screens with a maximum width of 600px */
}
/* Styles for screens with a width between 601px and 1024px */
@media screen and (min-width: 601px) and (max-width: 1024px) {
/* Custom styles specific for screens with a width between 601px and 1024px */
}
/* Styles for screens with a minimum width of 1025px */
@media screen and (min-width: 1025px) {
/* Custom styles specific for screens with a minimum width of 1025px */
}
}