1. 什么是移动端自适应布局
移动端设备多种多样，尺寸、分辨率不一，为了让页面在不同设备上都能够得到良好的显示效果，才会有"移动端自适应布局"这一概念。移动端自适应布局就是在不同设备上展现出相似的效果，可以更好的适应不同移动设备的尺寸和分辨率。
1.1 为什么需要移动端自适应布局
移动端设备种类繁多，从小屏计算器一样的手机到像平板电脑一样的设备，每个设备的屏幕尺寸、分辨率和像素密度都千差万别。因此，一份只适合在 PC 端展示的网页，在移动端上通常会面临排版混乱、字号过大过小、图片过大等问题，使得用户体验大大降低。
而带来移动端自适应布局的好处在于：在能够适应不同设备的前提下，保持用户界面的清晰可见且易操作，大大提升了用户体验，并且能够使得开发工作变得更加高效快捷。
1.2 移动端自适应布局的实现方式
实现移动端自适应布局的方式有很多，其中比较成熟的方法是：使用一些CSS预编译框架，如Bootstrap，Foundation等，还有一个比较流行的方式是使用Viewport单位，即：vw、vh，rem和%等。
那么Viewport单位是什么呢？简单来说，Viewport 是一个布局视口，是一种网页同时适配多个终端的方式，让页面框架或自适应网页的内容自适应不同有效区域（设备宽度），从而消除或减少水平卷轴、缩放控件等的出现。
1.3 移动端自适应布局中的Viewport
在移动端网页中，Viewport 的长和宽是由以下三个元素之一来确定的：
设备本身的尺寸及分辨率。例如，若使用iPhone查看网页，则将使用320px(设备长)× 480px(设备宽)的视口；
浏览器窗口外部的物理尺寸。如，Android设备上，顶部菜单栏，底部虚拟按键栏等系统组件将被视为浏览器窗口外的物理部分；
HTML中的meta tag。meta viewport 中提供的信息代表的是布局视口。
将 meta viewport 加入 HTML 头部，可设置移动端布局。如下面是一个典型的meta viewport标签的定义:
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>这个 meta 标签定义的viewport会自动适配当前设备的宽度和高度，并将比例初始化为1.0，禁止用户缩放页面。这样的设置就可以在很多情况下实现一个基本的自适应布局。
1.4 移动端自适应布局中的CSS3媒体查询
在 CSS3 中，我们可以使用媒体查询来针对不同的媒体类型定义不同的样式。
下面是一个典型的使用媒体查询的 CSS 代码：
/*仅当设备为小于960px才使用这些样式*/
@media screen and (max-width: 960px) {
/* 样式内容 */
}
上述代码将样式注射到由小于960像素的设备的显示器上。
2. 移动端自适应布局实战
2.1 使用Viewport实现移动端自适应布局
Viewport 允许我们根据不同的设备宽度和高度来自适应设备。将下面的meta viewport标签添加到我们的HTML文件中，就可以开始使用Viewport了：
<meta name="viewport" content="width=device-width, initial-scale=1.0">上面的语句将可视区域宽度设置为设备宽度，而初始缩放比例为1.0。
我们还可以额外设置 minimum-scale 和 maximum-scale 来控制用户是否可以缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">由于比例被固定为1，所以网页实际上是无法缩放的，这样一来，我们就实现了一个移动端自适应布局。下面是使用 Viewport 的一个简单示例：
/* 首先我们要定义 body 的基准字体大小 */
body {
font-size: 16px;
}
/* 我们以 320px 宽度为基准，进行自适应布局 */
@media screen and (max-width: 320px) {
/* 在小尺寸设备中，缩小body的基准字体大小 */
body {
font-size: 12px;
}
}
当设备宽度小于或等于320px 时，媒体查询开始生效。比例为1导致缩放无效，但我们可以通过定义基准字体大小，使得网页元素随着屏幕尺寸而发生改变。这样做可以让我们在不同设备上获得一个基本自适应尺寸。
2.2 使用CSS3媒体查询实现移动端自适应布局
在 CSS3 中，我们可以使用媒体查询支持多种不同的媒体类型，如 电视、电影媒体等。
下面是一个典型的使用媒体查询的 CSS 代码：
@media screen and (max-width: 480px) {
h1 {
font-size: 32px;
margin-bottom: 20px;
}
p {
font-size: 16px;
margin-bottom: 20px;
}
}
在上面的示例中，我们使用了响应式 Web 设计中最常用的几个 CSS 属性，如 font-size、margin-bottom 等。
我们还可以通过使用 JavaScript，检测设备尺寸，并从而实现移动端自适应布局。总的来说，我们可以通过多种方式来实现移动端自适应布局，根据不同的情况选取不同的 CSS 技术即可。
3. 总结
本文介绍了移动端自适应布局的概念，以及实现移动端自适应布局中重要的两种技术：Viewport 和 CSS3 媒体查询。通过这两种技术，我们可以在移动端实现一个自适应的网页，可以更好的适应不同移动设备的尺寸和分辨率。
在实践中，我们还可以通过使用一些常用的 CSS 框架，如 Bootstrap、Foundation 等，更加快速的实现移动端自适应布局。
不论您采用何种实现方式，移动端自适应布局的核心在于保持用户界面的清晰可见且易操作，增强用户交互体验。在不同用户屏幕尺寸的设备上都能够得到良好的显示效果，这是设计移动应用程序必需的。