@media only screen and (min-width: 768px) {
/* styles go here */
}
The example above, the styles inside the media query will go into effect at the point where the viewport width is greater than or equal to 768px
/*
styles outside of the media queries are considered
default styles
*/
.some-style {
}
.some-other-style {
}
@media only screen and (min-width: 576px) {
/* styles go here */
}
@media only screen and (min-width: 768px) {
/* styles go here */
}
@media only screen and (min-width: 992px) {
/* styles go here */
}
@media only screen and (min-width: 1200px) {
/* styles go here */
}
@media only screen and (min-width: 1200px) and (orientation: landscape) {
/* styles go here */
}