What are Media Queries?
Media queries act as a trigger for a conditional portion of CSS (cascading style sheet). They have three main components: the media type, the text expression (condition) and the styles to display if the condition is met. Let’s break-down the media query into its parts:
The media type has four main options: all, print, screen, and speech. For email, use the “screen” option to target specific devices.
Think of the condition as an “If” statement. For example, “If screen size is less than 480px, then display these styles.” Conditions can be based on multiple features such as: width, height, aspect-ratio, device-width and color.
For targeting devices, width (max or min), device-width (max or min) and device-pixel-ratio (aspect ratio) are used most frequently.
Styles within a media query function the same as any styles that are outside of a media query. However, these styles will only be applied if the condition of your media query is met.
Why Use Media queries?
Media queries allow us to target mobile devices, so even though we are building for desktop, our emails still render nicely on mobile devices. Or, if you are taking a mobile-first approach, then you can use media queries to create progressive enhancements in your emails.
The most common issue with mobile emails is horizontal scrolling; the email renders too widely to fit on our device's screen all at once. This can easily be remedied with the use of media queries by making the container of our email fit to 100% of the width of our screen.
Now that our email fits nicely across the width of our screen, our text appears very small and difficult to read. Thankfully, with media queries we can target and increase the font sizes used throughout the email.
A more advanced use of media queries allows us to stack content, and even make some content appear or disappear depending on the device. For example, loading an animation on devices that will render it, while ignoring that animation for all other devices allows for the best degradation.
Proceed with Caution
As with most features in email and websites, media queries are not supported everywhere. The majority of mobile devices' default email clients will support media queries, while a number of webmail apps for the different operating systems lack support for the feature.
It is important to know where your clients are opening your emails to know whether or not media queries are the best fit for your email design.