CSS在移动端视图生效但宽屏视图失效问题求助

我的CSS在移动端视图可正常工作，但宽屏视图中无法生效——给图片设置固定像素高度限制的操作在小屏幕上有效，宽屏上却不起作用。相关代码如下：

原CSS代码 #

.spandemo {
  display: inline-block;
  padding-left: 39%;
}

@media screen and (max-width: 600px) {
  .spandemo {
    display: inline-block;
    padding-left: 30%;
  }
  .column {
    width: 100%;
  }
  .column img {
    max-height: 140px;
    height: 70%;
    width: auto;
  }
}

@media screen and (min-width: 600px) {
  img {
    max-height: 100px !important;
    height: 70%;
    width: auto;
    padding-bottom: 10px;
  }
}

原HTML代码 #

<div class="row">
  <div class="column"><img class="responsive" src="https://picsum.photos/seed/left/200/300" style="width:50%" border="1" />
    <img class="responsive" src="https://picsum.photos/seed/right/200/300" style="float:right; width:50%" border="1" />
    <span style="float:left;">&nbsp;&nbsp;Before</span><span class="spandemo" style="float:left;">&nbsp;&nbsp;After</span></div>
</div>

1. 行内样式优先级过高：图片上的style="width:50%"行内样式会被浏览器优先执行，直接覆盖宽屏媒体查询里的高度限制规则，导致图片按宽度比例自动缩放，完全不受max-height约束。
2. 选择器权重不匹配：移动端用的是.column img（权重更高），宽屏用的是img（权重低），就算没有行内样式，宽屏的样式也可能被其他规则覆盖。

移除行内样式，把宽度规则移到CSS中，同时统一选择器权重，确保样式能正确生效：

修正后的CSS #

.spandemo {
  display: inline-block;
  padding-left: 39%;
}

@media screen and (max-width: 600px) {
  .spandemo {
    padding-left: 30%;
  }
  .column {
    width: 100%;
  }
  .column img {
    max-height: 140px;
    height: 70%;
    width: auto;
  }
}

@media screen and (min-width: 600px) {
  .column img {
    max-height: 100px;
    height: 70%;
    width: 50%;
    padding-bottom: 10px;
    box-sizing: border-box; /* 避免padding让图片宽度超50% */
  }
  .column img:last-child {
    float: right; /* 控制右侧图片的浮动 */
  }
}

修正后的HTML #

<div class="row">
  <div class="column">
    <img class="responsive" src="https://picsum.photos/seed/left/200/300" border="1" />
    <img class="responsive" src="https://picsum.photos/seed/right/200/300" border="1" />
    <span style="float:left;">&nbsp;&nbsp;Before</span>
    <span class="spandemo" style="float:left;">&nbsp;&nbsp;After</span>
  </div>
</div>

说明 #

• 把行内的width:50%和float:right移到CSS中，避免行内样式覆盖全局规则
• 宽屏用.column img选择器，和移动端权重一致，确保样式能正确应用
• 加box-sizing: border-box防止padding导致图片宽度超出容器
• 去掉了不必要的!important，现在选择器权重足够，不需要强制覆盖

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