能否在HTML行内style属性中使用@media规则？

不行，行内style属性不支持写入@media媒体查询规则。

原因： #

行内样式的语法仅允许定义当前元素的直接样式声明（比如color: red; font-size: 16px;这类键值对），而@media属于CSS的条件规则组，是外层的规则结构，不符合行内style的语法规范，浏览器也不会解析这种写法。

替代方案： #

• 方案一：保留<style>标签编写媒体查询，编辑器格式化通常不会影响功能：

  <style>
    @media only screen and (max-width: 600px) {
      .thanks { color: green; }
    }
  </style>
  

• 方案二：用CSS变量配合媒体查询，减少<style>标签内的代码量（如果编辑器格式化是你顾虑的点）：

  <div class="thanks" style="color: var(--thanks-color, black);"></div>
  <style>
    @media only screen and (max-width: 600px) {
      .thanks { --thanks-color: green; }
    }
  </style>
  

内容的提问来源于stack exchange，提问作者Help my Brother