移动端 Web 开发学习笔记：从视口到流式布局，一篇带你真正入门

掘金前端

作者 YukiMori23

2026年1月26日 10:16

在开始移动端 Web 开发之前，我一直以为「移动端就是把 PC 页面缩小」。
真正系统学完一轮之后才发现，视口、像素比、二倍图、布局方案，每一个点都决定了页面体验的好坏。

这篇文章是我在学习 移动端 Web 开发（流式布局方向） 时的完整总结，适合刚从 PC 端转向移动端，或者对移动端概念比较模糊的同学。

一、移动端开发的现状与特点

1. 移动端浏览器现状

移动端常见浏览器包括：

UC 浏览器
QQ 浏览器
百度手机浏览器
Safari（iOS）
Chrome（Android）

一个非常重要的事实是：

国内主流移动端浏览器，基本都基于 WebKit 内核。

这意味着：

H5 + CSS3 可以放心使用
私有前缀重点关注 -webkit-
不需要像 PC 时代那样被 IE 折磨

2. 屏幕碎片化问题

移动设备的分辨率极其碎片化，例如：

Android：720×1280、1080×1920、2K、4K
iPhone：750×1334、1242×2208 等

但作为前端开发者：

不需要纠结 dp、dpi、ppi 等概念
我们关心的是：
CSS 像素如何映射到设备屏幕。

二、视口（Viewport）是移动端的第一道门槛

很多移动端布局问题，根源都在 视口没理解清楚。

1. 三种视口的区别

1）布局视口（Layout Viewport）

浏览器默认的布局宽度
大多数移动端默认是 980px
用来兼容早期 PC 页面

这也是为什么 不加 viewport 标签时，页面会整体缩小。

2）视觉视口（Visual Viewport）

用户当前看到的区域
可以通过手指缩放改变
不影响布局视口

3）理想视口（Ideal Viewport）

设备最理想的展示宽度
设备有多宽，布局就有多宽
移动端开发真正想要的视口

2. 标准 viewport 写法（必须掌握）

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

这段代码的作用是：

布局视口等于设备宽度
默认不缩放
禁止用户手动缩放

这是移动端页面的标配。

三、二倍图与像素比：为什么图片会模糊

1. 物理像素 vs CSS 像素

在 Retina 屏幕下：

1 个 CSS 像素 ≠ 1 个物理像素
iPhone 常见的是 2 倍、3 倍像素比

例如：

页面上显示 50×50
实际需要 100×100 或 150×150 的图片资源

2. 二倍图的解决方案

图片本身使用更大的尺寸，但在 CSS 中压缩显示。

img {
  width: 50px;
  height: 50px;
}

如果原图是 100×100，就能在 Retina 屏上保持清晰。

3. 背景图的处理方式

.box {
  background-image: url(bg@2x.png);
  background-size: 50px 50px;
}

关键点在于：

图片是二倍图
background-size 写成设计稿尺寸

四、移动端开发方案选择

1. 两种主流方案

方案一：单独制作移动端页面（主流）

m.jd.com
m.taobao.com

特点：

专门为手机设计
性能和体验最好
维护成本较高

方案二：响应式页面

同一套 HTML
通过媒体查询适配不同设备

缺点很明显：

样式复杂
维护成本高
移动端体验一般

实际项目中，大厂基本都选择第一种方案。

五、移动端技术解决方案汇总

1. CSS 初始化推荐 normalize.css

相比 reset.css，normalize.css 的优点是：

保留有价值的默认样式
修复浏览器差异
模块化、文档完善

2. CSS3 盒子模型（移动端强烈推荐）

* {
  box-sizing: border-box;
}

优点：

padding、border 不会撑大盒子
布局更直观
非常适合移动端

3. 移动端常见特殊样式

* {
  -webkit-tap-highlight-color: transparent;
}

input,
button {
  -webkit-appearance: none;
}

img,
a {
  -webkit-touch-callout: none;
}

这些样式可以：

去掉点击高亮
统一表单样式
禁止长按弹出菜单

六、移动端常见布局方式

1. 流式布局（百分比布局）

流式布局的核心思想：

宽度使用百分比
随屏幕变化自适应

.container {
  width: 100%;
}

.item {
  width: 50%;
}

2. 限制最大最小宽度（常用技巧）

body {
  min-width: 320px;
  max-width: 640px;
  margin: 0 auto;
}

好处是：

防止页面过窄或过宽
常用于电商移动端页面

七、总结

通过这一阶段的学习，我对移动端 Web 开发有了几个明确的认知：

视口是移动端布局的基础
二倍图是清晰显示的关键
流式布局是最常用的移动端布局方式
CSS3 盒模型极大降低了布局复杂度
移动端开发更注重体验和性能

普通视图