@media only mediatype and (expressions) {
CSS-Code;
}
mediatypes:
all // selects all types
print // used for printers
screen // used for screens
speech // used for screenreaders
Expressions:
(max-width: ) // from width and below
(min-width: ) // from width and above
(orientation: landscape) // landscape mode
(orientation: portrait) // portrait mode
Example:
@media only screen and (max-width: 480px) {
.box {
flex-direction: column;
}
}To apply different styles to different screen sizes.
/* Mobile Portrait */
@media screen and (min-width: 0px) {
}
/* Mobile Landscape */
@media screen and (min-width: 568px) {
}
/* Tablet */
@media screen and (min-width:768px) {
}
/* Laptop */
@media screen and (min-width: 1024px){
}
/* Large Laptop */
@media screen and (min-width: 1280px){
}
/* Desktop */
@media screen and (min-width: 1440px){
}
/* Large Desktop */
@media screen and (min-width: 1920px){
}
/* 4k */
@media screen and (min-width: 2560px){
:root {font-size: 1.4rem;}
}Simple media query setup targeting all devices. Preferably, use for mobile first approach.
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />To set different stylesheets at different screen sizes.