如何仅用HTML和CSS实现网站适配手机及各类屏幕尺寸？

嘿，作为编程新手遇到这种“自己电脑显示正常，换设备就乱套”的情况太常见了，完全不用不好意思！既然你只想用HTML和CSS搞定，那咱们就聚焦纯前端的响应式技巧，一步步解决图片、文本的适配问题：

1. 先搞定移动端的基础：添加Viewport元标签 #

这是适配移动设备的第一步，很多新手容易漏掉。在HTML的<head>里加上这段代码，让浏览器知道要按设备屏幕尺寸来渲染页面：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width=device-width：让页面宽度等于设备屏幕的宽度
• initial-scale=1.0：设置初始缩放比例为1，避免页面默认缩放

2. 让图片自动适配任意屏幕 #

图片是适配重灾区，别再给图片设固定的width和height像素值啦，试试这些方法：

• 全局设置图片的响应式样式：

img {
  max-width: 100%;
  height: auto;
}

这样图片会自动缩放到父容器的最大宽度，同时保持宽高比，不会变形。

• 如果需要图片填充容器但不拉伸，可以用object-fit：

img {
  width: 100%;
  height: 300px; /* 可以设固定高度 */
  object-fit: cover; /* 裁剪图片填充容器，保持比例 */
  /* 或者用object-fit: contain; 让图片完整显示，不裁剪 */
}

3. 文本和容器的适配技巧 #

别再用固定的px来设置字体大小和容器宽度了，改用相对单位：

• 字体大小用rem或vw：
  • rem是相对于根元素（<html>）的字体大小，比如：

  html {
    font-size: 16px; /* 基础字体大小 */
  }
  p {
    font-size: 1rem; /* 等于16px */
    @media (max-width: 768px) {
      font-size: 0.9rem; /* 小屏幕上缩小字体 */
    }
  }
  

  • vw是相对于视口宽度的单位，比如font-size: 2vw;，字体大小会随屏幕宽度自动变化。
• 容器宽度用max-width代替固定width：

.container {
  max-width: 1200px; /* 最大宽度，大屏幕不会太宽 */
  width: 90%; /* 小屏幕占屏幕90%宽度 */
  margin: 0 auto; /* 居中 */
}

4. 用Flexbox/Grid做响应式布局 #

这两个CSS布局工具是响应式开发的利器，能让元素自动排列和换行：

• Flexbox示例（让导航栏在小屏幕上换行）：

.nav {
  display: flex;
  flex-wrap: wrap; /* 空间不够时自动换行 */
  gap: 1rem; /* 元素间的间距 */
}
.nav-item {
  flex: 1; /* 每个项目平分可用空间 */
  min-width: 200px; /* 最小宽度，避免太挤 */
}

• Grid示例（自适应列数）：

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

这段代码会根据屏幕宽度自动调整列数，每个卡片最小宽度250px，超过后自动增加列数。

5. 媒体查询：针对不同屏幕定制样式 #

如果需要在特定屏幕尺寸下调整样式，用媒体查询：

/* 当屏幕宽度小于768px时生效 */
@media (max-width: 768px) {
  .header {
    padding: 1rem; /* 减小内边距 */
  }
  .sidebar {
    display: none; /* 隐藏侧边栏 */
  }
}

最后再提醒下：写完代码后，可以用浏览器的开发者工具（按F12）切换不同设备视图来测试，比如手机、平板，这样能快速看到适配效果～

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