如何使用PHP提取CSS文件中的@media标签并迁移至新文件

核心思路 #

利用正则表达式匹配并提取CSS中完整的@media媒体查询块（支持内部嵌套大括号），将这些块从原CSS中移除后，分别保存到新文件和更新原文件。

代码实现 #

<?php
// 配置文件路径
$originalCssPath = 'styles.css';
$mediaQueriesPath = 'media-queries.css';

// 读取原CSS内容
$cssContent = file_get_contents($originalCssPath);
if ($cssContent === false) {
    die('无法读取原CSS文件');
}

// 正则匹配完整的@media块（支持内部嵌套大括号）
$mediaQueryPattern = '/@media\s+[^}]*{(?:[^{}]+|(?R))*}/s';

// 提取所有媒体查询规则
preg_match_all($mediaQueryPattern, $cssContent, $matches);
$mediaQueries = implode("\n\n", $matches[0]);

// 保存提取出的媒体查询到新文件
if (file_put_contents($mediaQueriesPath, $mediaQueries) === false) {
    die('无法保存媒体查询文件');
}

// 移除原CSS中的媒体查询规则，清理多余空行
$cleanedCss = preg_replace($mediaQueryPattern, '', $cssContent);
$cleanedCss = preg_replace('/^\s*[\r\n]/m', '', $cleanedCss);
$cleanedCss = trim($cleanedCss) . "\n";

// 保存清理后的CSS回原文件（建议操作前备份原文件）
if (file_put_contents($originalCssPath, $cleanedCss) === false) {
    die('无法保存清理后的CSS文件');
}

echo '操作完成：媒体查询已提取到 ' . $mediaQueriesPath . '，原CSS已清理';
?>

示例说明 #

原CSS文件（styles.css）

/* 原CSS示例 */
body {
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 768px) {
    body {
        padding: 10px;
    }
    .container {
        width: 100%;
    }
}

h1 {
    font-size: 24px;
}

@media print {
    body {
        color: black;
        background: white;
    }
}

提取后的媒体查询文件（media-queries.css）

@media screen and (max-width: 768px) {
    body {
        padding: 10px;
    }
    .container {
        width: 100%;
    }
}

@media print {
    body {
        color: black;
        background: white;
    }
}

清理后的原CSS文件（styles.css）

/* 原CSS示例 */
body {
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 24px;
}

关键注意事项 #

• 正则中的(?R)实现递归匹配，确保能正确处理@media内部嵌套的大括号（比如媒体查询里的规则块）。
• s修饰符让正则的.匹配换行符，避免因媒体查询跨多行导致匹配不完整。
• 操作前建议备份原CSS文件，防止意外数据丢失。

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