笔记--移动端布局（流式布局）

1. 移动端基础

1.1 常见移动端屏幕尺寸

2. 视口

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

2.1 布局视口 layout viewport

2.2 视觉视口 visual viewport

2.3 理想视口 ideal viewport

2.4 meta 视口标签

2.5 标准的viewport设置

3. 二倍图

3.1 物理像素&物理像素比

/* 1. 物理像素就是我们所说的分辨率，iphone8的物理像素是 750 */
/* 2. 在iPhone8里面 1px 开发像素 = 2个物理像素 */

3.2 多倍图

3.3 背景缩放 background-size

3.4 多倍图切图 cutterman

4. 移动端开发选择

4.1 移动端主流方案

4.2 单独移动端页面（主流）

通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动端打开，则跳到移动端页面。

4.3 响应式兼容PC移动端

5. 移动端技术解决方案

5.1 移动端浏览器

5.2 CSS初始化 normalize.css

5.3 CSS3 盒子模型 box-sizing

5.4 特殊样式

6. 移动端常见布局

移动端技术选型

6.1 流式布局（百分比布局）