Media Queries
- Mobile-First CSS
IMPORTANT
When writing your CSS you should put your defaults at the top to apply to all devices.
These defaults should be for MOBILE sized screens.
- This way, older mobile devices that don't understand the @media rules, will still display the default values that are optimized for mobile small screens.
- The @media styles will overwrite the defaults depending on the various properties of the device.
@media (min-width: 600px) {
p {
/* this style applies to paragraphs if the device screen is over 600px wide */
}
}