移动端开发之流式布局

# 移动端开发之流式布局

# 1. 移动端基础

# 1.1 浏览器现状

PC端常见浏览器 & 移动端常见浏览器

PC端常见浏览器

360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。

移动端常见浏览器

UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。

国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的-样。 **总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。**

# 1.2 手机屏幕现状

移动端设备屏幕尺寸非常多，碎片化严重。
Android设备有多种分辨率: 480x800， 480x854， 540x960， 720x1280 ， 1080x1920等，还有传说中的2K ， 4k屏。
近年来iPhone的碎片化也加剧了，其设备的主要分辨率有: 640x960， 640x1 136， 750x1334， 1242x2208等。
作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是px。

# 1.3 移动端调试方法

Chrome DevTools（谷歌浏览器）的模拟手机调试
搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
使用外网服务器，直接IP或域名访问

# 1.4 总结

移动端浏览器我们主要对webkit内核进行兼容
我们现在开发的移动端主要针对手机端开发
现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一
学会用谷歌浏览器模拟手机界面以及调试

# 2. 视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口

# 2.1 布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
iOS， Android基本都将这个视口分辨率设置为980px ，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

# 2.2 视觉视口 visual viewport

字面意思，它是用户正在看到的网站的区域。注意:是网站的区域。
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

# 2.3 理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口个对设备来讲，是最理想的视口尺寸
需要手动添写 meta 视口标签通知浏览器操作
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

# 2.4 Meta 视口标签

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

属性	解释说明
`width`	设置视口的宽度，可以指定为一个数值（如 1024）或 `device-width`。`device-width` 表示使用设备的物理宽度，使页面自动适应不同设备的宽度。
`initial-scale`	设置页面的初始缩放比例，为一个大于 0 的数字。`1.0` 表示页面按照正常尺寸显示，不放大或缩小。
`maximum-scale`	设置用户可以缩放的最大比例，为一个大于 0 的数字。`1.0` 表示用户不能放大页面，大于 `1.0` 则允许用户放大页面。
`minimum-scale`	设置用户可以缩放的最小比例，为一个大于 0 的数字。`1.0` 表示用户不能缩小页面，小于 `1.0` 则允许用户缩小页面。
`user-scalable`	指定用户是否可以缩放页面。可以设置为 `yes` 或 `no`（或 `1` 或 `0`）。`no` 表示用户不能缩放页面，`yes` 则允许用户通过手势缩放页面。

# 2.5 总结

视口就是浏览器显示页面内容的屏幕区域
视口分为布局视口、视觉视口和理想视口
我们移动端布局想要的是理想视[ 就是手机屏幕有多宽，我们的布局视口就有多宽
想要理想视口，我们需要给我们的移动端页面添加meta视口标签

# 2.6 标准的viewport设置

为了让网页在不同的移动设备上显示良好，并提供一致的用户体验，我们通常需要使用以下的 viewport 设置：

视口宽度和设备保持一致：width=device-width
视口的默认缩放比例 1.0：initial-scale=1.0
不允许用户自行缩放：user-scalable=no
最大允许的缩放比例 1.0：maximum-scale=1.0
最小允许的缩放比例 1.0：minimum-scale=1.0

以下是一个标准的 meta 视口标签设置，通常用于确保页面在移动设备上的最佳显示效果：

<meta 
  name="viewport" 
  content="
    width=device-width,    /* 设置视口宽度与设备宽度一致 */
    initial-scale=1.0,     /* 初始缩放比例为 1.0，即 100% 显示 */
    maximum-scale=1.0,     /* 最大缩放比例限制为 1.0，禁止放大 */
    minimum-scale=1.0,     /* 最小缩放比例限制为 1.0，禁止缩小 */
    user-scalable=no       /* 禁止用户手动缩放页面 */
  "
>

1
2
3
4
5
6
7
8
9
10

# 3. 二倍图

# 3.1 物理像素 & 物理像素比

物理像素：物理像素点是屏幕显示的最小颗粒，是实际存在的物理点。设备制造时就已设定，例如 iPhone 6/7/8 的分辨率是 750x1334 物理像素。
CSS 像素：在网页开发中，1 个 CSS 像素不一定等于 1 个物理像素。
- 在 PC 端页面中，1 个 CSS 像素通常等于 1 个物理像素。
- 在移动端设备上，1 个 CSS 像素可能由多个物理像素组成。
物理像素比（device pixel ratio）：一个 CSS 像素包含的物理像素点的数量。
- 在传统的 PC 和普通手机屏幕上，物理像素比通常为 1（1 CSS 像素 = 1 物理像素）。
- 在 Retina 屏幕（如 iPhone 6/7/8）上，物理像素比为 2（1 CSS 像素 = 2x2 物理像素），这意味着更多的物理像素被压缩到一个区域内，提升了屏幕显示的细腻度。

# 3.2 二倍图

二倍图：指准备的图片分辨率是实际显示需要的两倍。比如需要一个 50x50 像素的图，那么准备一个 100x100 像素的图片，并通过 CSS 缩小到 50x50 像素，以确保在高分辨率屏幕上显示清晰。

# 3.3 二倍图解决方案

问题：如果直接使用 50x50 像素的图片在 iPhone 8（物理像素比为 2）的屏幕上显示，图像会被放大到 100x100 像素，导致模糊。
解决方案：
- 准备一张 100x100 像素的图片。
- 使用 CSS 将图片显示尺寸设置为 50x50 像素。

<img src="image@2x.png" alt="高分辨率图像" style="width: 50px; height: 50px;">

# 3.4 多倍图

多倍图：对于不同设备的物理像素比，可能需要准备多倍图，如三倍图（3x）、四倍图（4x）等。
应用场景：
- 对于一张 50x50 像素的图片，在 Retina 屏幕（如 iPhone 6/7/8）上，会需要二倍图（100x100）。
- 在更高分辨率设备上，如一些安卓设备，可能需要三倍图（150x150）或四倍图（200x200）。
开发实践：在实际开发中，可以使用工具（如 Photoshop）按需切出多倍图，以适应不同设备的分辨率。

# 3.5 背景缩放 `background-size`

background-size 属性用于设置背景图片的尺寸，以适应不同的布局和显示需求。

.element {
  /* 设置背景图片 */
  background-image: url('image@2x.png');
  
  /* 背景图片缩放大小，指定宽度和高度为 50px */
  background-size: 50px 50px;

  /* 背景图片缩放大小，指定宽度，保持宽高比 */
  background-size: 50px; /* 仅指定宽度，等比缩放高度 */

  /* 背景图片缩放大小，使用百分比 */
  background-size: 100%; /* 使用百分比指定背景图片宽度 */

  /* 让背景图片完全覆盖元素区域 */
  background-size: cover; /* 可能会裁剪图片 */

  /* 让背景图片完整显示在元素区域内 */
  background-size: contain; /* 图片可能会缩小以适应 */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

一个参数：如果只写一个参数，表示宽度，高度会自动按比例缩放。
百分比：可以使用百分比来指定背景图片的尺寸，适应容器大小。
cover：背景图片完全覆盖元素区域，图片可能会部分裁剪以适应容器。
contain：背景图片完整显示在元素区域内，图片可能会缩小以适应容器。

总结

使用二倍图和 background-size 可以显著提高图片在高分辨率设备上的显示效果，确保在各类设备上提供一致和清晰的视觉体验。通过准备多倍图，可以适应不同设备的分辨率要求，在现代网页和应用程序中提高用户体验。

在移动端开发中，开发者需要根据项目需求选择合适的方案，以便在各种设备上提供最佳的用户体验。以下是移动端开发的主流方案及其详细说明：

# 4. 移动端开发选择

# 4.1 移动端主流方案

在移动端开发中，常见的有两种主要方案：单独制作移动端页面和响应式页面设计。

# 1. 单独制作移动端页面（主流）

特点：为移动设备专门设计并开发独立的网页，与桌面端网页分开。
实现方式：
- 通常在域名前加 m（表示 mobile）来区分移动端页面，如 m.example.com。
- 通过后端或前端脚本检测用户的设备类型（手机、平板等），并自动跳转到对应的移动端页面。

示例代码：设备检测并跳转到移动端页面

// JavaScript 检测设备并跳转到移动端页面
if (/Mobi|Android/i.test(navigator.userAgent)) {
  // 如果检测到移动设备，跳转到移动端页面
  window.location.href = "https://m.example.com";
}

1
2
3
4
5

案例：
- 京东商城手机版、淘宝触屏版等。
优点：
- 移动端页面可以专注于移动设备的用户体验和界面设计。
- 可以针对移动设备的性能进行优化，提高加载速度和响应时间。
缺点：
- 需要维护两个独立的网站版本（桌面端和移动端），可能增加开发和维护成本。

# 2. 响应式页面兼容移动端（其次）

特点：一个网页可以在不同设备上自适应调整布局，实现跨设备兼容。
实现方式：
- 使用 CSS 媒体查询，根据屏幕宽度动态调整样式。
- 布局和样式调整可以根据设备尺寸和分辨率进行优化。

示例代码：使用 CSS 媒体查询实现响应式设计

/* 针对桌面设备的样式 */
body {
  font-size: 16px;
  margin: 0 auto;
  max-width: 1200px; /* 限制最大宽度 */
}

/* 针对平板设备的样式 */
@media (max-width: 768px) {
  body {
    font-size: 14px; /* 调整字体大小 */
    padding: 10px; /* 增加内边距 */
  }
}

/* 针对手机设备的样式 */
@media (max-width: 480px) {
  body {
    font-size: 12px; /* 再次调整字体大小 */
    padding: 5px; /* 减少内边距 */
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

案例：
- 三星手机官网（www.samsung.com）。
优点：
- 只需维护一个网站版本，减少开发和维护工作量。
- 可以为所有设备提供一致的用户体验。
缺点：
- 开发复杂，需要考虑不同设备的兼容性和样式调整。
- 可能需要更多的时间来优化和调试跨设备的兼容性问题。

# 4.2 总结

在移动端开发中，常见的方案包括：

单独制作移动端页面：为移动设备创建独立的网页，优化用户体验，市场上多数企业（如电商）选择这种方式。
响应式页面设计：使用一个网页适配所有设备，通过 CSS 媒体查询实现布局调整，适用于内容较为简单的网站。

选择合适的开发方案应根据项目的具体需求、资源和目标用户群体来决定。对于大多数需要高度优化的移动体验的应用，单独制作移动端页面仍然是主流选择，而响应式设计适用于需要跨设备一致性的网站。

# 5. 移动端技术解决方案

# 5.1 移动端浏览器

Webkit 内核：移动端浏览器大多基于 Webkit 内核（如 Safari、Chrome），因此主要考虑 Webkit 的兼容性。
H5 和 CSS3：可以放心使用 HTML5 和 CSS3 新特性，因为现代移动浏览器支持度较好。
浏览器私有前缀：只需要为 Webkit 添加私有前缀即可，如 -webkit-。

示例

/* Webkit 内核浏览器支持的 CSS3 属性 */
.example {
  -webkit-transform: rotate(45deg); /* 添加 Webkit 前缀 */
  transform: rotate(45deg);         /* 标准属性 */
}

1
2
3
4
5

# 5.2 CSS 初始化

在移动端开发中，推荐使用 normalize.css 进行样式初始化。其优点包括：

保留有价值的默认值：不会一味地重置样式，而是保留了一些有用的浏览器默认值。
修复浏览器 bug：对一些浏览器的默认行为进行修复。
模块化：设计为可选的模块化样式，方便集成。
详细的文档：提供了清晰的文档说明。

使用方法

在项目中引入 normalize.css：

<!-- 在 HTML 文件中引入 normalize.css -->
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">

1
2

# 5.3 CSS3 盒子模型 `box-sizing`

盒子模型定义了如何计算元素的总宽度和高度。CSS3 提供了改进的盒子模型 box-sizing，使得布局更加简单。

传统盒子模型：
- 计算方式：盒子宽度 = CSS中设置的 width + border + padding
- 使用属性：box-sizing: content-box;
CSS3 盒子模型：
- 计算方式：盒子宽度 = CSS中设置的 width（包含了 border 和 padding）
- 使用属性：box-sizing: border-box;
- 优点：padding 和 border 不会撑大盒子，使得布局计算更简单。

示例

/* 使用 CSS3 盒子模型 */
.example-box {
  width: 100px;                /* 设置盒子宽度 */
  padding: 10px;               /* 内边距 */
  border: 2px solid #000;      /* 边框 */
  box-sizing: border-box;      /* 使用 CSS3 盒子模型，包含内边距和边框 */
}

/* 传统盒子模型 */
.traditional-box {
  width: 100px;                /* 设置盒子宽度 */
  padding: 10px;               /* 内边距 */
  border: 2px solid #000;      /* 边框 */
  box-sizing: content-box;     /* 使用传统盒子模型，宽度不包含内边距和边框 */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

选择建议

移动端：可以全部使用 CSS3 盒子模型，因为现代浏览器支持度较好。
PC 端：如果需要兼容旧版浏览器，可能需要使用传统盒子模型；不考虑兼容性时，选择 CSS3 盒子模型。

# 5.4 特殊样式

以下是一些常用的移动端样式设置，帮助提高用户体验：

/* CSS3 盒子模型 */
.example {
  box-sizing: border-box;      /* 设置盒子模型为 border-box */
  -webkit-box-sizing: border-box; /* 添加 Webkit 前缀 */
}

/* 清除点击高亮，设置为完全透明 */
.button {
  -webkit-tap-highlight-color: transparent;
}

/* 自定义按钮和输入框样式 */
.input {
  -webkit-appearance: none;    /* 取消默认样式 */
}

/* 禁用长按时弹出的菜单 */
img, a {
  -webkit-touch-callout: none;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在移动端开发中，选择合适的布局方式可以显著提高应用的用户体验和适应性。以下是移动端常见布局的详细说明和实现方法。

# 6. 移动端常见布局

# 6.1 移动端技术选型

# 6.1.1 单独制作移动端页面（主流）

流式布局（百分比布局）：通过设置盒子的宽度为百分比来实现自适应布局。
Flex 弹性布局（强烈推荐）：使用 Flexbox 实现灵活的盒子模型布局。
Less + Rem + 媒体查询布局：结合 Less 预处理器、Rem 单位和媒体查询实现响应式布局。
混合布局：结合多种布局技术，满足复杂的设计需求。

# 6.1.2 响应式页面兼容移动端（其次）

媒体查询：使用 CSS 媒体查询，根据设备尺寸调整样式。
Bootstrap：使用 Bootstrap 框架提供的网格系统实现响应式布局。

# 6.2 流式布局

流式布局，也称为百分比布局或非固定像素布局，是移动 Web 开发中常用的布局方式。

特点：通过设置元素的宽度为百分比，使其根据屏幕的宽度进行自适应调整。
优点：内容可以自动填充至两侧，适用于各种屏幕尺寸。

示例图

流式布局示例

示例代码

/* 设置主体盒子宽度为 100%，并限定最小和最大宽度 */
body {
    width: 100%;                /* 设置宽度为 100% */
    min-width: 320px;           /* 设置最小宽度 */
    max-width: 640px;           /* 设置最大宽度 */
}

/* 对某一区域内的元素进行比例分配宽度和浮动 */
.seckill div:nth-child(2) ul li {
    width: 16.66%;              /* 设置每块区域宽度为 1/6，即 16.66% */
    display: block;             /* 设置为块级元素 */
    float: left;                /* 设置浮动，使其排列在一行 */
}

/* 设置小区域内的图片宽度为 100% */
.seckill div:nth-child(2) ul li img {
    width: 100%;                /* 图片宽度自适应父元素 */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 6.3 流式布局案例：京东移动端首页

案例模板：京东移动端首页 (opens new window)
代码参考：代码参考链接 (opens new window)

# 6.3.1 二倍精灵图做法

步骤：
1. 使用 Fireworks 将精灵图等比例缩放至原来的一半（使用fireworks修改宽度和高度即可缩放）。
2. 测量缩放后的精灵图中各图标的坐标。
3. 设置 background-size 为精灵图原来宽度的一半，以适应高清屏幕。

/* 设置背景图为精灵图，调整背景图位置 */
.icon {
    background: url(../images/jd-sprites.png) no-repeat -81px 0;
    background-size: 200px auto; /* 设置背景图大小为原始大小的一半 */
}

1
2
3
4
5

# 6.3.2 图片格式

# ① DPG 图片压缩技术

特点：京东自主研发的图片压缩技术，节省近 50% 浏览流量。
优势：提升网页加载速度，兼容性好，与 WebP 清晰度无差。

# ② WebP 图片格式

开发者：由 Google 开发的一种图片格式。
特点：加快图片加载速度，压缩体积为 JPEG 的 2/3。
优势：节省服务器带宽资源和数据空间，提高网页性能。

总结

选择合适的布局方式和图片格式可以显著提高移动端页面的加载速度和用户体验。通过使用流式布局、Flexbox、媒体查询等技术，开发者可以实现高效的响应式设计，满足各种设备的显示需求。同时，采用先进的图片压缩技术，如 WebP 和 DPG，可以进一步提升网页性能，降低加载时间。

编辑此页

上次更新: 2024/12/28, 18:32:08

← 移动端适配移动端开发之 rem 布局→

移动端开发之流式布局

# 移动端开发之流式布局

# 1. 移动端基础

# 1.1 浏览器现状

PC端常见浏览器

移动端常见浏览器

# 1.2 手机屏幕现状

# 1.3 移动端调试方法

# 1.4 总结

# 2. 视口

# 2.1 布局视口 layout viewport

# 2.2 视觉视口 visual viewport

# 2.3 理想视口 ideal viewport

# 2.4 Meta 视口标签

# 2.5 总结

# 2.6 标准的viewport设置

# 3. 二倍图

# 3.1 物理像素 & 物理像素比

# 3.2 二倍图

# 3.3 二倍图解决方案

# 3.4 多倍图

# 3.5 背景缩放 background-size

# 4. 移动端开发选择

# 4.1 移动端主流方案

# 1. 单独制作移动端页面（主流）

# 2. 响应式页面兼容移动端（其次）

# 4.2 总结

# 5. 移动端技术解决方案

# 5.1 移动端浏览器

# 5.2 CSS 初始化

# 5.3 CSS3 盒子模型 box-sizing

# 5.4 特殊样式

# 6. 移动端常见布局

# 6.1 移动端技术选型

# 6.1.1 单独制作移动端页面（主流）

# 6.1.2 响应式页面兼容移动端（其次）

# 6.2 流式布局

# 6.3 流式布局案例：京东移动端首页

# 6.3.1 二倍精灵图做法

# 6.3.2 图片格式

# ① DPG 图片压缩技术

# ② WebP 图片格式

# 3.5 背景缩放 `background-size`

# 5.3 CSS3 盒子模型 `box-sizing`