
Quick Reference
The @media Rule describes CSS media queries to be used to define style rules for specific device types or a wide range of screen sizes and capabilities.
Below are three of the most used media queries.
- The first example targets screens that are 767px and smaller
- The second example targets screens that are 768px or larger
- The third example targets screens between 1024px and 1439px inclusive
The rules applicable to each scenario are then written as normal, but inside the media query.
@media screen and (max-width: 767px) {
.bar {
display: none;
}
}
@media screen and (min-width: 768px) {
.foo {
display: none;
}
}
@media screen and (min-width: 1024px) and (max-width: 1439px) {
.foo {
background-color: white;
}
}
Using And with Or
Using a comma between size settings acts as an “or” statement. The following will target screens that are between 1024px and 1439px (inclusive) OR screens that are 1920px or larger.
@media screen and (min-width: 768px) and (max-width: 1439px), (min-width: 1920px) {
.foo {
background-color: white;
}
}
Orientation: Portrait / Landscape
The screen orientation can also be targeted (works great for tablets to determine how it’s being held by the user).
- The first example targets screens that are wider than they are tall
- The second example targets screens that are taller than they are wide
@media screen and (orientation: landscape) {
.foo {
background-color: white;
}
}
@media screen and (orientation: portrait) {
.foo {
background-color: white;
}
}
Print and Speech
Just as we can target the “screen”, we can target a device intended to print or read a document.
- The first example targets printers
- The second example targets printers where the page is taller than it is wide
- The third targets speech reading devices
@media print {
.foo {
background-color: white;
}
}
@media print and (orientation: portrait) {
.foo {
background-color: white;
}
}
@media speech {
.foo {
background-color: white;
}
}
Media Types
Media Features
CSS Notes:
- The “inherit”, “initial” and “unset” keywords can be used with any CSS property to set its value
- In CSS there are many ways to express a color value in a property
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.