Laravel邮件媒体查询失效：移动端CSS类在媒体查询下不生效

这个问题在邮件开发里太常见了，核心原因是邮件客户端对CSS的支持和普通网页差异极大——不仅几乎不支持外部CSS文件引用，对媒体查询的识别也有诸多限制。下面是具体的解决步骤：

1. 把媒体查询样式直接嵌入邮件模板的<head>中 #

邮件里完全不能依赖外部的themes/default.css文件，必须把样式直接写在邮件模板的<head>标签内。修改你的Laravel Blade邮件模板：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        /* 全局基础样式，作为非移动端的默认值 */
        .mobile-full-width { 
            min-width: auto; 
            padding: initial; 
            color: inherit;
        }
        /* 移动端媒体查询样式 */
        @media screen and (max-width: 480px) {
            .mobile-full-width { 
                min-width: 100% !important; 
                padding: 0 !important; 
                color: red !important; 
            }
        }
    </style>
</head>
<body>
    <!-- 你的邮件内容，比如应用了类的元素 -->
    <div class="mobile-full-width">这是测试内容</div>
</body>
</html>

2. 确保viewport和DOCTYPE设置正确 #

iOS Mail、Gmail移动端等主流移动端邮件客户端，需要正确的viewport元标签和DOCTYPE才能识别媒体查询，上面的模板已经包含了标准配置，不要省略。

3. 针对不支持媒体查询的客户端做兼容 #

像Outlook桌面版这类客户端完全不支持媒体查询，如果你需要兼顾这些场景，可以：

• 采用移动优先写法：先定义移动端样式，再用媒体查询覆盖桌面端样式（适配你的需求可以调整逻辑）
• 使用条件注释添加Outlook专属样式：

<!--[if mso]>
<style type="text/css">
    .mobile-full-width {
        /* Outlook桌面版的适配样式 */
        min-width: 100%;
        padding: 0;
        color: red;
    }
</style>
<![endif]-->

4. 验证渲染结果 #

可以用Laravel的邮件预览功能（比如调用邮件实例的->preview()方法）查看最终渲染的HTML，确认媒体查询样式确实嵌入在<head>中，而非引用外部文件。也可以用Mailtrap这类工具测试不同邮件客户端的实际显示效果。

内容的提问来源于stack exchange，提问作者Chris