CSS自适应屏幕

CSS自适应屏幕代码教程

✏️ 开篇说明 🎨

本文为全新原创CSS自适应教程，避开复杂理论，聚焦「90%项目必用」的自适应方案，精选4个搜索量TOP的核心知识点，主打极简可复制代码、新手零门槛，每部分都附实战示例+避坑提示，开发时直接抄作业，有错欢迎指出来～

💡 核心目标：学会后能快速实现「PC端+移动端」自适应，适配不同屏幕尺寸（手机、平板、电脑），不用写多套CSS！

📌 四大高频自适应方案（搜索量拉满，刚需实用）

精选知识点（按使用频率排序）：1. 媒体查询（最常用，兼容所有浏览器）2. Rem适配（移动端首选）3. Vw/Vh适配（极简无依赖）4. Flex/Grid自适应布局（配合适配方案使用），逐个拆解，代码可直接复制运行。

一、媒体查询（Media Query）------ 自适应万能方案

搜索量TOP1，最基础、最常用的自适应方案，核心逻辑：根据不同屏幕宽度，执行不同的CSS样式，兼容所有浏览器（包括旧版），PC端+移动端通用，新手入门首选。

1. 核心语法（必记）

CSS 复制代码

/* 基础语法：屏幕宽度满足条件时，执行内部样式 */
@media screen and (条件) {
  /* 这里写满足条件后的CSS样式 */
}

/* 常用条件（重点记这3个） */
@media screen and (max-width: 768px) { /* 屏幕宽度 ≤ 768px（移动端） */ }
@media screen and (min-width: 769px) and (max-width: 1200px) { /* 平板端 */ }
@media screen and (min-width: 1201px) { /* 屏幕宽度 ≥ 1201px（PC端） */ }

2. 实战示例（可直接复制运行）

需求：实现一个卡片，PC端显示3列、移动端显示1列，字体和内边距随屏幕自适应。

HTML 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"&gt;
  <!-- 关键：移动端适配必须加这个meta标签，否则媒体查询无效 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>媒体查询实战</title>
  <style>
    /* 通用样式（所有屏幕都生效） */
    .card-container {
      display: flex;
      flex-wrap: wrap; /* 自动换行，配合自适应 */
      gap: 20px; /* 卡片之间的间距 */
      padding: 20px;
    }
    .card {
      background: #f5f5f5;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* 1. PC端（≥1201px）：3列布局 */
    @media screen and (min-width: 1201px) {
      .card {
        width: calc(33.33% - 20px); /* 3列均分，减去间距 */
        font-size: 16px;
      }
    }

    /* 2. 平板端（769px-1200px）：2列布局 */
    @media screen and (min-width: 769px) and (max-width: 1200px) {
      .card {
        width: calc(50% - 20px); /* 2列均分 */
        font-size: 15px;
      }
    }

    /* 3. 移动端（≤768px）：1列布局 */
    @media screen and (max-width: 768px) {
      .card {
        width: 100%; /* 占满屏幕宽度 */
        font-size: 14px;
        padding: 12px; /* 减小内边距，适配小屏幕 */
      }
      .card-container {
        padding: 10px; /* 减小容器内边距 */
        gap: 10px;
      }
    }
  </style>
</head>
<body>
  <div class="card-container">
    <div class="card">卡片1（自适应宽度）</div>
    <div class="card">卡片2（自适应宽度）</div>
    <div class="card">卡片3（自适应宽度）</div>
  </div>
</body>
</html>

3. 核心避坑（90%新手踩过）

🚨 避坑1：必须添加 viewport meta 标签（示例中已写），否则移动端媒体查询无效，样式错乱。
🚨 避坑2：媒体查询的顺序不能乱！要遵循「从小到大」或「从大到小」，推荐「从大到小」（PC→平板→移动端），避免样式覆盖。
🚨 避坑3：不要在媒体查询中重复写所有样式，只写需要修改的样式（通用样式写在媒体查询外面），减少冗余。

二、Rem适配 ------ 移动端首选方案

搜索量TOP2，专门针对移动端的自适应方案，核心逻辑：以根元素（html）的字体大小为基准，所有元素尺寸用rem单位，通过JS动态修改根字体大小，实现「等比例缩放」，适配所有手机屏幕。

1. 核心准备（2步搞定）

步骤1：设置根字体大小（默认基准）

CSS 复制代码

/* CSS 中设置默认根字体大小（PC端/平板端） */
html {
  font-size: 16px; /* 1rem = 16px（默认基准，可自定义） */
}

/* 移动端通过JS动态修改，后面会写 */

步骤2：添加JS动态适配代码（核心）

作用：根据手机屏幕宽度，动态修改html的font-size，实现rem等比例缩放（复制到html的head标签内即可）。

JavaScript 复制代码

<script>
// Rem自适应核心JS（无需修改，直接复制）
function setRemUnit() {
  // 1. 获取屏幕宽度（兼容不同浏览器）
  const screenWidth = document.documentElement.clientWidth || window.innerWidth;
  // 2. 设定基准宽度（通常以375px为手机设计稿基准，可修改）
  const baseWidth = 375;
  // 3. 计算根字体大小（1rem = 屏幕宽度 / 10，方便计算）
  const fontSize = screenWidth / 10;
  // 4. 设置根元素字体大小（最大不超过32px，避免字体过大）
  document.documentElement.style.fontSize = Math.min(fontSize, 32) + 'px';
}

// 5. 初始化执行一次
setRemUnit();
// 6. 屏幕旋转/ resize时，重新执行（适配屏幕变化）
window.addEventListener('resize', setRemUnit);
window.addEventListener('orientationchange', setRemUnit);
</script>

2. 实战示例（移动端适配卡片）

HTML 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rem自适应实战</title>
  <script>
    // 先复制Rem自适应JS（核心）
    function setRemUnit() {
      const screenWidth = document.documentElement.clientWidth || window.innerWidth;
      const baseWidth = 375;
      const fontSize = screenWidth / 10;
      document.documentElement.style.fontSize = Math.min(fontSize, 32) + 'px';
    }
    setRemUnit();
    window.addEventListener('resize', setRemUnit);
    window.addEventListener('orientationchange', setRemUnit);
  </script>
  <style>
    /* 所有元素尺寸用rem单位（1rem = 屏幕宽度/10） */
    .card {
      width: 8rem; /* 相当于屏幕宽度的80%（8/10） */
      height: 5rem;
      background: #42b983;
      color: #fff;
      border-radius: 0.5rem; /* 5px（以375px屏幕为例） */
      padding: 0.8rem;
      font-size: 1rem;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <div class="card">Rem自适应卡片</div>
</body>
</html>

3. 核心避坑

🚨 避坑1：JS代码必须放在CSS前面（优先修改根字体大小），否则CSS中的rem计算会出错。
🚨 避坑2：设计稿基准宽度（baseWidth）要和UI设计稿一致（通常375px/750px），否则缩放比例不对。
🚨 避坑3：不要混合使用px和rem（除了根字体大小），否则无法实现等比例自适应。

三、Vw/Vh适配 ------ 极简无依赖方案

搜索量TOP3，最简洁的自适应方案，核心逻辑：以「屏幕可视区域」为基准，1vw = 屏幕宽度的1%，1vh = 屏幕高度的1%，无需JS、无需媒体查询，直接用vw/vh单位，适配所有屏幕（推荐简单页面使用）。

1. 核心单位说明（必记）

✅ 1vw = 视口宽度的1%（例：屏幕宽375px，1vw = 3.75px）
✅ 1vh = 视口高度的1%（例：屏幕高667px，1vh = 6.67px）
✅ vmin = vw和vh中的最小值，vmax = vw和vh中的最大值（适配横竖屏）

2. 实战示例（极简自适应页面）

需求：实现一个全屏自适应卡片，居中显示，字体、间距随屏幕缩放。

HTML 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vw/Vh自适应实战</title>
  <style>
    /* 重置默认边距 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* 页面全屏 */
    body {
      width: 100vw; /* 占满屏幕宽度 */
      height: 100vh; /* 占满屏幕高度 */
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8f9fa;
    }

    /* 自适应卡片（所有尺寸用vw） */
    .vw-card {
      width: 80vw; /* 卡片宽 = 屏幕宽的80% */
      height: 50vw; /* 卡片高 = 屏幕宽的50%（避免竖屏过高） */
      background: #6495ed;
      color: #fff;
      border-radius: 2vw; /* 圆角随屏幕缩放 */
      padding: 5vw;
      font-size: 4vw; /* 字体大小 = 屏幕宽的4% */
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <div class="vw-card">Vw/Vh自适应<br/>极简无依赖</div>
</body>
</html>

3. 核心避坑

🚨 避坑1：同样需要添加viewport meta标签，否则vw/vh的计算基准会错误（适配移动端）。
🚨 避坑2：vh会受手机状态栏、导航栏影响，高度建议用vw或vmin，避免竖屏时高度溢出。
🚨 避坑3：复杂页面不推荐单独使用vw/vh（会出现字体过大/过小），建议配合媒体查询微调。

四、Flex/Grid自适应布局 ------ 配合适配方案使用

搜索量TOP4，布局层面的自适应，核心逻辑：通过Flex（弹性布局）或Grid（网格布局），让元素自动分配空间，配合前面的媒体查询、rem、vw/vh，实现更灵活的自适应，是项目中最常用的组合方案。

1. Flex自适应（最常用，重点记）

HTML 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex自适应布局</title>
  <style>
    .flex-container {
      display: flex; /* 开启Flex布局 */
      flex-wrap: wrap; /* 自动换行（关键，适配小屏幕） */
      gap: 1rem; /* 间距用rem，配合Rem适配 */
      padding: 1rem;
    }

    .flex-item {
      flex: 1; /* 自动分配剩余空间，实现均分 */
      min-width: 200px; /* 最小宽度，小于这个宽度就换行 */
      height: 100px;
      background: #f08080;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
    }

    /* 移动端微调（配合媒体查询） */
    @media screen and (max-width: 768px) {
      .flex-item {
        min-width: 100%; /* 移动端占满宽度，1列显示 */
      }
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">Flex item1</div>
    <div class="flex-item">Flex item2</div>
    <div class="flex-item">Flex item3</div>
  </div>
</body>
</html>

2. Grid自适应（复杂布局首选）

HTML 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid自适应布局</title>
  <style>
    .grid-container {
      display: grid; /* 开启Grid布局 */
      /* 关键：自动填充，每列最小200px，最大1fr（均分） */
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 1rem;
      padding: 1rem;
    }

    .grid-item {
      height: 100px;
      background: #9370db;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
    }

    /* 移动端微调 */
    @media screen and (max-width: 768px) {
      .grid-container {
        grid-template-columns: 1fr; /* 移动端1列布局 */
      }
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">Grid item1</div>
    <div class="grid-item">Grid item2</div>
    <div class="grid-item">Grid item3</div>
    <div class="grid-item">Grid item4</div>
  </div>
</body>
</html>

3. 核心避坑

🚨 避坑1：Flex布局中，flex-wrap: wrap 必须写，否则元素不会换行，会溢出屏幕。
🚨 避坑2：Grid布局的grid-template-columns，用auto-fill配合minmax，实现自动适配列数，新手首选。
🚨 避坑3：Flex/Grid只是布局方式，单独使用无法实现"字体、间距"自适应，需配合媒体查询/rem/vw使用。

五、实战组合方案（重点！项目必用）

实际开发中，不会单独使用某一种方案，推荐「组合搭配」，兼顾兼容性和灵活性，示例如下（可直接复制到项目中）：

HTML 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS自适应组合方案</title>
  <!-- 1. Rem自适应JS（优先加载） -->
  <script>
    function setRemUnit() {
      const screenWidth = document.documentElement.clientWidth || window.innerWidth;
      const baseWidth = 375;
      const fontSize = screenWidth / 10;
      document.documentElement.style.fontSize = Math.min(fontSize, 32) + 'px';
    }
    setRemUnit();
    window.addEventListener('resize', setRemUnit);
  </script>
  <style>
    /* 2. 通用样式（rem单位） */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-size: 1rem;
      background: #f5f5f5;
    }

    /* 3. Flex布局（自适应布局） */
    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      padding: 1rem;
    }

    .item {
      flex: 1;
      min-width: 12rem; /* 192px（以375px屏幕为例） */
      height: 8rem;
      background: #42b983;
      color: #fff;
      border-radius: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* 4. 媒体查询（微调细节） */
    @media screen and (max-width: 768px) {
      .container {
        gap: 0.8rem;
        padding: 0.8rem;
      }
      .item {
        min-width: 100%; /* 移动端1列 */
      }
    }

    @media screen and (min-width: 1201px) {
      .container {
        max-width: 1200px; /* PC端限制最大宽度，避免过宽 */
        margin: 0 auto;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">组合方案1</div>
    <div class="item">组合方案2</div>
    <div class="item">组合方案3</div>
  </div>
</body>
</html>

六、总结（重点提炼，快速记忆）

✅ 媒体查询：万能方案，兼容所有浏览器，适合PC+移动端，核心是"按屏幕宽度写样式"。
✅ Rem适配：移动端首选，等比例缩放，需配合JS修改根字体大小，适配所有手机。
✅ Vw/Vh适配：极简无依赖，适合简单页面，核心是"以屏幕可视区域为基准"。
✅ Flex/Grid：布局方案，配合前面3种使用，实现元素自动分配空间，灵活适配。
💡 项目首选：Rem + Flex/Grid + 媒体查询（兼顾兼容性、灵活性和开发效率）。

✏️ CSS自适应教程完结，所有代码均可直接复制运行，避坑点已标注清楚～收藏起来，开发时直接抄作业，再也不用愁屏幕适配问题！