Responsive Web Design (RWD) topic: Common device screen break points.
/* 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) {…}
Source: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
More on Responsive Web Design:
https://www.w3schools.com/css/css_rwd_intro.asp
Another take (using SASS):
@mixin for-phone-only {
@media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
@media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
@media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
@media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
@media (min-width: 1800px) { @content; }
}
// usage
.my-box {
padding: 10px;
@include for-desktop-up {
padding: 20px;
}
}
https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/