新手首次开发HTML/CSS页面遇响应式适配问题求指导

一、电脑端预览适配效果的方法 #

• 浏览器开发者工具模拟：按F12打开浏览器开发者工具，点击顶部的设备模拟按钮（手机/平板样式图标），可以直接选择预设的手机、平板尺寸，也可以手动拖拽视口边缘调整宽度，修改代码后可以实时看到不同尺寸下的页面效果。
• 真机预览：电脑和手机连接同一WiFi，用VS Code的Live Server插件启动本地服务后，查看电脑的局域网IP，在手机浏览器输入http://[你的电脑IP]:5500即可查看真实设备上的显示效果。

二、核心适配逻辑与代码示例 #

你遇到的文本、图片画廊拉伸变形，核心原因是固定宽度容器没有适配移动端视口、图片没有设置自适应规则、多列布局没有根据屏幕宽度调整列数。你可以参考下面的方案调整：

1. 先加全局基础适配规则 #

先把这段代码加到CSS最顶部，解决基础的拉伸和默认样式差异问题：

* {
  margin: 0;
  padding: 0;
  /* 内边距和边框不会撑大容器宽度，避免溢出 */
  box-sizing: border-box;
}

img {
  /* 图片最大宽度不超过父容器，高度自动按比例缩放，不会拉伸 */
  max-width: 100%;
  height: auto;
  display: block;
}

2. 媒体查询具体适配示例 #

常用的移动端断点设为768px即可，小于768px的设备按手机端样式适配，你可以根据自己的实际类名替换下面的示例代码：

/* 桌面端默认样式，你原来的正常样式写在这里 */
.page-container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
/* 图片画廊桌面端4列布局 */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 24px 0;
}
.article-text {
  font-size: 18px;
  line-height: 1.7;
  color: #333;
}

/* 768px以下手机端适配，覆盖上面的桌面端样式 */
@media (max-width: 768px) {
  .page-container {
    /* 不要用固定宽度，100%适配屏幕宽度 */
    width: 100%;
    padding: 0 12px;
  }
  .gallery {
    /* 4列改2列，避免每列宽度太窄挤压内容 */
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .article-text {
    /* 适当缩小字号，避免移动端一行文字太少阅读体验差 */
    font-size: 16px;
    line-height: 1.6;
  }
}

三、新手适配注意要点 #

• 不要给外层容器写死固定宽度，优先用max-width限制最大宽度，移动端自动适配100%
• 多列布局的列数随屏幕宽度缩小逐步减少，平板可以设3列，手机设2列或1列
• 所有图片必须加自适应规则，避免强制设置宽高导致拉伸

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