Media queries can be used to target certain resolutions or even specific email clients and can replace or work alongside
With the latest update to Outlook.com, all modern webmail clients now support media queries (with some caveats). We have seen a resurgence in queries and interest in how to use them, which we’ll cover here.
What are Media Queries?
A media query consists of an optional media type (all, handheld, print, TV, and so on) and any number of optional expressions that limit when the query will trigger, such as width, pixel-density or orientation. Media queries are part of CSS3 and enable developers to customize their content for different presentation mediums.
At the basic level, media queries enable an email developer to create a responsive email by detecting the width of the display. For this purpose, the most commonly used query is max-width. Any width that is less than the max-width specified, all of the CSS within the query will take effect.
How Min- and Max-Width Queries Work
How media queries function can be a bit confusing. Let’s take a look at the queries which are commonly used in email.
Max-width
Here is an example of a max-width query.
What this query really means, is “If [device width] is less than or equal to 600px, then do {…}”
So if the email is opened on an iPhone 5S with a screen width of 320px, the media query will trigger and all of the styles contained in { … } will take effect.
Min-width
Here is an example of a min-width query.
What this query really means, is “If [device width] is greater than or equal to 600px, then do {…}”
So if the email is opened on an iPhone 5S with a screen width of 320px, the media query will not trigger and the styles contained in { … } will not take effect.
Combining media query expressions
Max-width and min-width can be used together to target a specific range of screen sizes.
@media only screen and (max-width: 600px) and (min-width: 400px) {...}The query above will trigger only for screens that Turkey Business Email List are 600-400px wide. This can be used to target specific devices with known widths.
Breakpoints
Most media queries are set to trigger at certain screen widths or breakpoints. Exactly what these should be set to is a matter of some debate amongst email developers.
iPhones and iPads provide us with a few easy breakpoints to start from. Coding styles for these specific clients will ensure emails look great on these screens.
Android devices, on the other hand, vary widely in screen size because there are so many different manufacturers and devices. I recommend creating two to four breakpoints, based on popular Apple devices, which will cover most devices.
- iPhone 5S is an example of a Breakpoint 1 with 320px
- iPhone 6+ is an example of a Breakpoint 2 with 414px
- iPad Mini is an example of a Breakpoint 3 with 703px
- iPad Air is an example of a Breakpoint 4 with 768px
Breakpoints 3 and 4 are optional, as most emails will look fine showing the desktop version on an iPad or large tablet. You could even get away with using just breakpoint 2, if you code UAE Cell Number your container tables to expand to 100% width (and not a set width, which may or may not match the device well).
