如何使用media queries修改HTML？移动端网页适配技术咨询

嘿，很高兴你开始探索媒体查询啦！其实你完全不需要修改HTML就能实现这个需求——媒体查询是通过CSS来控制不同屏幕尺寸下的样式表现，不用动HTML结构哦。下面我给你一步步拆解怎么实现电脑端图片并排、移动端上下排列的效果：

第一步：搭建基础HTML结构 #

先写好两张图片的HTML，不用额外加换行标签，因为我们靠CSS来控制布局：

<div class="image-container">
  <img src="你的图片1地址" alt="图片1描述">
  <img src="你的图片2地址" alt="图片2描述">
</div>

第二步：设置桌面端默认样式 #

先给桌面端写默认样式，让图片并排显示。这里推荐用Flex布局，简单又好用：

.image-container {
  display: flex;
  gap: 16px; /* 两张图片之间的间距，可根据需求调整 */
}

.image-container img {
  max-width: 100%; /* 防止图片超出容器 */
  height: auto; /* 保持图片比例 */
}

如果不想用Flex，也可以用inline-block：

.image-container img {
  display: inline-block;
  margin-right: 16px;
  max-width: calc(50% - 8px); /* 平分容器宽度，减去间距的一半 */
  height: auto;
}

第三步：添加移动端媒体查询 #

接下来写媒体查询，当屏幕宽度小于某个阈值（比如常用的768px，你也可以根据需求调整）时，让图片上下排列：

/* 当屏幕宽度 ≤ 768px 时应用下面的样式 */
@media (max-width: 768px) {
  .image-container {
    flex-direction: column; /* Flex布局改为垂直排列 */
    gap: 12px; /* 移动端的间距可以调小一点 */
  }
  /* 如果用的是inline-block的写法，就改成下面这样： */
  /* .image-container img {
    display: block;
    margin-right: 0;
    max-width: 100%;
    margin-bottom: 12px;
  } */
}

小提示 #

• 阈值（768px）不是固定的，你可以根据自己的设计需求改成375px、480px等；
• 给图片加max-width: 100%是为了防止在小屏幕上图片溢出容器，保证适配性；
• 媒体查询的逻辑是“默认样式面向桌面端，移动端用媒体查询覆盖”，当然你也可以反过来，默认面向移动端，桌面端用min-width的媒体查询来调整，看你习惯哪种写法。

这样就轻松实现你想要的效果啦——电脑端两张图片并排，移动端自动上下排列，完全不用修改HTML结构哦！

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