php 从 css 获取每个@media 标签答案

【问题标题】：php get every @media tag from cssphp 从 css 获取每个@media 标签
【发布时间】：2022-11-18 22:00:30
【问题描述】：

如何使用 php 从 css 文件中获取每个 @media 标签，例如从原始文件移动到新文件

.socialLinks {display: flex;margin: 16px 0 }
.socialLinks ul {display: flex;list-style: none;margin: 16px 0;padding: 0 }
.socialLinks ul li a {align-items: center;background-color: #fff;border-radius: 50%;color: var(--theme-color-primary);display: flex;flex-direction: column;height: 50px;justify-content: center;margin: 0 14px 0 0;text-decoration: none;width: 50px }
.rtl .socialLinks ul li a {margin: 0 0 0 14px }
@media screen and (max-width: 425px) {.style_outerContainer {padding: 20px 0 0}
.socialLinks ul li a {height: 40px;width: 40px}
}
.style_outer {position: relative }
.style_outer .style_containerImage{height: 400px;padding: 157px 0;position: relative;width: 100% }
@media screen and (min-width: 768px) {.style_out .style_c {bottom: 0;height: auto;position: relative;top: 0;width: 100%} }
.style_overlay {background-image: linear-gradient(to bottom, var(--theme-color-primary), var(--theme-color-gradient));border: 1px solid #979797;height: 100%;left: 0;opacity: .7;position: absolute;top: 0;width: 100% }
.intro {display: flex;flex-direction: column;justify-content: center;margin-bottom: 20px }
.intro p {color: #031d5b;color: hsla(0, 0%, 100%, .59);max-width: 400px;opacity: .85 }
.intro h2 {font-weight: 600;margin-bottom: 16px }

输出

@media screen and (max-width: 425px) {.style_outerContainer {padding: 20px 0 0}
.socialLinks ul li a {height: 40px;width: 40px}
}
@media screen and (min-width: 768px) {.style_out .style_c {bottom: 0;height: auto;position: relative;top: 0;width: 100%} }

我想使用 php 从 css 文件中提取所有 @media 标签

【问题讨论】：

标签： php css

【解决方案1】：

使用函数 preg_match_all 您可以确定以 @media 开头的行和内容

preg_match_all("/(@media .*)/", $cssContent, $matches);

示例输出：

array(2) {
  [0]=>
  array(2) {
    [0]=>
    string(79) "@media screen and (max-width: 425px) {.style_outerContainer {padding: 20px 0 0}"
    [1]=>
    string(122) "@media screen and (min-width: 768px) {.style_out .style_c {bottom: 0;height: auto;position: relative;top: 0;width: 100%} }"
  }
  [1]=>
  array(2) {
    [0]=>
    string(79) "@media screen and (max-width: 425px) {.style_outerContainer {padding: 20px 0 0}"
    [1]=>
    string(122) "@media screen and (min-width: 768px) {.style_out .style_c {bottom: 0;height: auto;position: relative;top: 0;width: 100%} }"
  }
}

【讨论】：

不适用于 CSS .div:before{content:"@media "}