如何调整现有HTML代码实现页面响应式布局？

现有代码所有布局逻辑基于固定像素值+绝对定位实现，body容器被硬编码为固定宽1440px，所有页面元素的位置、宽度都写死了固定像素值，完全没有适配弹性尺寸的基础，因此即使添加媒体查询也无法生效。

第一步：修正根容器基础配置 #

先删掉原有body样式里的固定宽高、绝对定位配置，改成适配全宽的基础样式：

body {
  /* 移除原有position: absolute、width:1440px、height:2420px属性 */
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #383C46;
}

第二步：替换固定定位为流式弹性布局 #

不要用绝对定位排布页面核心内容，改用Flex/Grid这类流式布局，元素会自动适配父容器宽度：

顶部导航适配 #

把页面标题、导航菜单、Get Started按钮统一放到一个父容器<div class="header">里，给父容器加Flex布局：

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 5%;
  background: #3F5577;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

原有导航相关的left、固定width属性全部可以删掉，布局会自动适配屏幕宽度。

底部技术图标适配 #

把html、css、js三个图标统一放到父容器<div class="tech-wrapper">里，用Grid布局实现自动换行：

.tech-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 80px;
  padding: 100px 5%;
  max-width: 1200px;
  margin: 0 auto;
}
/* 移除原有#html、#css、#js里的绝对定位、固定left/top属性 */
#html, #css, #js {
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto;
}

大屏下三个图标自动并排，小屏下会自动堆叠，不需要手动调整位置。

第三步：添加媒体查询适配小屏细节 #

基础布局改完后，只需要用媒体查询调整小屏的细节样式即可，例如：

/* 适配宽度小于768px的平板、手机设备 */
@media (max-width: 768px) {
  h {
    font-size: 18px;
  }
  #getstarted {
    font-size: 16px;
  }
  #menu {
    width: auto;
    left: auto;
  }
}

• 外层容器永远不要写死固定宽度，优先用width: 100%搭配max-width限制最大宽度即可
• 核心内容布局不要用绝对定位，优先选Flex、Grid流式布局，元素会自动适配父容器尺寸
• 固定像素值仅用来写内边距、边框、小图标尺寸这类不影响整体布局的属性，大尺寸、位置参数优先用百分比、fr、vw/vh这类相对单位
• 媒体查询只需要调整小屏的细节样式，不需要重写全量代码

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