Definition
A CSS media type describes the category of device for which a style applies, such as screen, print or speech. In email the practical use of media types is the media query, most commonly the @media (max-width: ...) blocks that let an email detect the recipient's screen width and swap in mobile-friendly styles.
Not all email clients run media queries. Apple Mail and most modern mobile apps honour them, while Gmail historically ignores them and Outlook desktop uses a custom engine, so responsive email relies on how each client processes these conditions.
Media Query Support by Client
| Email Client | Media Query Support |
|---|---|
| Apple Mail (desktop and iOS) | Full support |
| Gmail (desktop) | No media query support |
| Gmail app | Limited support, varies by platform |
| Outlook (desktop / Word engine) | No media query support |
| Outlook (mobile) | Full support |
| Most other native apps | Varies, commonly supported |
Because support is uneven, a common pattern is to build a fluid, percentage-based layout that adapts without media queries, then add media-query refinements for the clients that honour them.
Common Media Query Pattern in Email
@media screen and (max-width: 600px) {
.container { width: 100% !important; }
.stack { display: block !important; width: 100% !important; }
.cta { width: 100% !important; text-align: center !important; }
}
- Fluid or hybrid design: Use percentage widths and
displaystacking so columns collapse on small screens. - Mobile-first base: Default styles are mobile-friendly; a desktop query refines larger screens.
- Declare styles twice: Include properties in and out of the query with
!importantto survive client stripping.
How to Build Responsive Email Safely
- Know your audience's clients: Confirm which clients your subscribers use and which support queries.
- Prefer fluid tables: Percentage-based layouts scale without relying on media queries.
- Test on real devices: A preview is not the same as rendering on a phone inbox.
- Keep the fallback readable: Ensure the email reads well even when a client ignores the query.
Related Glossary Terms
Above the Fold in Email
Above the fold in email refers to the content visible to a recipient before they scroll, a critical area for first impressions and primary calls to action.
Accessible CTA (Email)
An accessible CTA is a button or link coded with sufficient colour contrast, visible focus states, descriptive screen-reader text, and a minimum touch target of 44×44 pixels.
Adaptive Design
Adaptive design in email uses predefined layouts that adjust to specific device or client widths, rather than fluidly resizing to every possible screen.
AI-Generated Content in Email
AI-generated content in email is copy, images, code or subject lines produced by artificial intelligence tools to speed up campaign production and testing.
Alt Text
Alt text is the written alternative to an image in an email, displayed when images are blocked, slow to load, or consumed by screen readers.
Autoplay Video in Email
Autoplay video in email refers to the limited ability to play video content automatically when an email is opened, using specific client-supported techniques.
Frequently Asked Questions
A media type identifies the category of device a style applies to, such as screen or print. In email, media queries using these types detect screen width and apply responsive styles.
Gmail has limited to no support, depending on the version and interface. Gmail's webmail and apps typically ignore `@media` blocks, so purely query-based emails can break in Gmail. Marketers use fluid tables or hybrid approaches to compensate.
Use a fluid design where table cells and containers size by percentage. Combined with display stacking and wide defaults, the layout adapts on narrow screens even when media queries are ignored.
Clients differ: some ignore queries entirely (Outlook desktop and Gmail), others strip them, and some apply them precisely (Apple Mail). Test the rendered output in each client your audience uses before sending.