为何CSS媒体查询在PHP的if条件输出中无法生效？

嘿，这个问题我太熟悉了！核心原因很简单：内联样式（元素的style属性）不支持媒体查询这类CSS At规则。

具体原因 #

浏览器在解析元素的style属性时，只会识别单个的CSS属性-值对（比如grid-area: 4 / 2 / span 1 / span 1;），而@media属于「条件规则组」，不在内联样式的支持范围内——W3C的规范明确规定，style属性的值只能是CSS声明块，不能包含@media、@keyframes这类高级规则。所以你加了@media部分后，浏览器直接忽略了这整段无效的规则，而去掉媒体查询后，剩下的grid-area声明是合法的内联样式，自然就能正常生效。

解决方案 #

既然内联样式走不通，我们可以换两种更规范的方式来实现需求：

1. 动态生成<style>标签里的媒体查询

通过PHP在页面中插入针对特定元素的媒体查询样式：

<?php if(isset($rowa['title'])): ?>
<style>
@media (min-width: 768px) {
    /* 给目标元素加一个唯一类名 */
    .target-grid-item {
        grid-area: 4 / 2 / span 1 / span 1;
    }
}
</style>
<?php endif; ?>

然后给需要应用样式的元素加上对应的类：

<div class="target-grid-item">
    <!-- 你的内容 -->
</div>

2. 动态添加类名，配合全局样式

用PHP给元素添加自定义类，然后在全局样式表中写媒体查询：

<!-- 根据条件添加类名 -->
<div class="<?php echo isset($rowa['title']) ? 'special-grid-layout' : ''; ?>">
    <!-- 你的内容 -->
</div>

然后在全局CSS（或<style>标签）中定义：

@media (min-width: 768px) {
    .special-grid-layout {
        grid-area: 4 / 2 / span 1 / span 1;
    }
}

这两种方法都符合CSS规范，比强行用内联样式加媒体查询靠谱得多～

内容的提问来源于stack exchange，提问作者Bəxtiyar Əli Ağayar