css3怎样适配移动端屏幕

在 CSS3 中适配移动端屏幕，核心目标是：让页面在不同尺寸、不同分辨率的手机上都能正常显示，并且操作友好。下面从基础到进阶系统讲一下。

一、最基础：视口（viewport）设置

必须加，否则手机浏览器会按桌面宽度（约 980px）渲染：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

含义：

• width=device-width：宽度等于设备宽度
• initial-scale=1.0：初始缩放为 1
• user-scalable=no：禁止用户缩放（视业务而定）

二、使用相对单位（不要用死 px）

1️⃣ rem（最常用）

html {
  font-size: 16px;
}
.box {
  width: 10rem; /* 160px */
}

移动端常用方案：

html {
  font-size: calc(100vw / 3.75); /* 375px 设计稿 */
}

1rem = 屏幕宽度的 1/3.75

2️⃣ vw / vh（CSS3 原生适配）

.box {
  width: 50vw;  /* 屏宽一半 */
  height: 20vh; /* 屏高 20% */
}

✅ 不需要 JS
❌ 老安卓支持一般（但现在基本没问题）

3️⃣ %（布局流）

.container {
  width: 100%;
}

三、弹性布局（Flex / Grid）

Flex（移动端首选）

.container {
  display: flex;
  flex-wrap: wrap;
}

Grid（复杂布局）

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

四、媒体查询（Media Query）

针对不同屏幕做适配：

/* 手机 */
@media (max-width: 768px) {
  .box {
    font-size: 14px;
  }
}

/* 高清屏 */
@media (-webkit-min-device-pixel-ratio: 2) {
  .logo {
    background-image: url(logo@2x.png);
  }
}

五、图片适配

1️⃣ 自适应图片

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

2️⃣ 高清屏图片

<img src="img.png" srcset="img@2x.png 2x">

六、1px 边框问题（经典坑）

高清屏下 1px 会变粗：

.border {
  position: relative;
}
.border::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #000;
  transform: scale(0.5);
  transform-origin: 0 0;
}

七、禁止默认行为（移动端优化）

a, button {
  -webkit-tap-highlight-color: transparent;
}
body {
  -webkit-text-size-adjust: 100%;
}

八、常见移动端适配方案对比

九、推荐组合（2024 实战）

✅ viewport + Flex + vw/rem + media query

html { font-size: calc(100vw / 3.75); }
body { font-size: 0.14rem; }

如果你愿意，可以告诉我：

• 是否用 Vue / React / 原生
• 设计稿是 375 / 750
• 是否要 兼容旧安卓

我可以直接给你一套 可直接抄的适配模板。