如何实现信息图区块的响应式布局？

一、修复媒体查询样式冲突 #

• 严格遵循移动优先的媒体查询顺序：先写移动端基础样式，再按min-width从小到大的顺序编写大屏样式（先960px，后1024px），CSS后声明的样式会覆盖先声明的，避免小屏样式意外覆盖大屏样式。
• 精简媒体查询代码：只在媒体查询中修改需要调整的属性（比如top、left、尺寸），不要重复声明position:absolute这类基础属性，减少冗余和冲突概率。
• 提升选择器特异性：用更精准的选择器定位齿轮（比如.infographic-block .cogwheel而非单独的.cogwheel），避免全局样式或其他组件样式干扰。

二、优化齿轮定位逻辑 #

• 基于父容器相对定位：给图片容器设置position:relative，齿轮用position:absolute，并使用相对单位（%、vw）而非固定px值定位，确保缩放时位置比例一致。例如：

  .infographic-img-container {
    position: relative;
    max-width: 100%;
  }
  .cogwheel {
    position: absolute;
    top: 12%;
    left: 28%;
    width: 7vw;
    height: 7vw;
  }
  

• 用transform校准定位：如果齿轮偏移，添加transform: translate(-50%, -50%)让齿轮中心点对齐定位坐标，避免缩放时出现偏移错位。

三、排查样式冲突的实用技巧 #

• 打开浏览器开发者工具（F12），选中齿轮元素，查看「样式」面板中被划掉的规则，确认是哪个媒体查询或全局样式在干扰当前定位。
• 暂时注释掉非必要的媒体查询，逐步排查是哪一段代码导致的样式串读。

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