如何用内联CSS根据设备动态调整WordPress图库标题字体大小？

你当前的CSS媒体查询逻辑完全搞反了：默认设置.on-the-fly-behavior{font-size:17px;}后，用@media (min-width:200px)把字体改成15px，这意味着所有宽度≥200px的设备（包括桌面端）都会显示15px字体，只有极端小屏才会显示17px，完全不符合你的需求。

修正后的内联CSS代码 #

把媒体查询改成针对移动端的max-width（以行业通用的768px作为移动端/桌面端分界），就能实现桌面端17px、移动端15px或更小的效果，还能加额外样式避免文字覆盖图片：

<style scoped>
.on-the-fly-behavior{
    font-size:17px; /* 桌面/笔记本端默认字体大小 */
}
/* 针对移动端设备 */
@media (max-width:768px){
    .on-the-fly-behavior{
        font-size:14px; /* 可按需调整为15px或更小 */
        /* 可选：防止文字过长覆盖图片的辅助样式 */
        white-space: normal;
        max-height: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>
<div class="on-the-fly-behavior">My Image Caption</div>

其他可行方法 #

• 主题自定义CSS：进入WordPress后台→外观→自定义→额外CSS，把上述CSS代码（去掉<style scoped>标签）粘贴进去，全站生效，不用每次嵌入图库都加内联代码。
• 图库插件设置：如果你用的图库插件（比如NextGEN Gallery、Envira Gallery）自带自定义样式选项，直接在插件设置里找到标题字体大小的移动端适配项，无需手动写CSS。

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