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 */
}
}
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
/* Styles for screens smaller than or equal to 600px */
@media (max-width: 600px) {
/* CSS rules for small screens */
}
/* Styles for screens between 601px and 900px */
@media (min-width: 601px) and (max-width: 900px) {
/* CSS rules for medium screens */
}
/* Styles for screens larger than 900px */
@media (min-width: 901px) {
/* CSS rules for large screens */
}
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
//320px — 480px: Mobile devices
//481px — 768px: iPads, Tablets
//769px — 1024px: Small screens, laptops
//1025px — 1200px: Desktops, large screens
//1201px and more — Extra large screens, TV