1、基本概念
1.1背景：
因为手机的尺寸和屏幕的像素越来越大，导致我们响应式布局很难保证网页能够100%适配主流的屏幕
1.2概念：
使用css3的单位以及弹性布局等技术来实现移动端布局。一般移动端布局跟pc端是完全不一样的。
2、屏幕像素
2.1逻辑像素：
真正用于显示屏幕内容的像素
2.2设备物理像素：
是屏幕一出场已经确定的像素
2.3逻辑像素和设备物理像素：
设备物理像素是指屏幕的实际像素有多少。但现在的手机屏幕一般物理像素都是1920*1080或者2k或更高。但如果一个设备物理像素等于一个逻辑像素（css px），会导致1920px内容挤在手机屏幕里，无法查看，所以才使用逻辑像素来显示页面
2.4常见逻辑像素（移动端页面宽高）：
iPhone：375和414
320（少数）
android：360
414
480
3、视口（viewport）
3.1概念：
视口即手机屏幕上用于显示页面的那块区域。同时HTML可以利用<meta>标签来控制网页在手机屏幕的展示方式。
3.2手机网页展示分类：
3.2.1布局视口：
pc端是什么样，手机就是什么样。在移动端，会将pc端的所有内容都挤在手机屏幕里。内容极度挤压无法看清。
3.2.2理想视口：
按照手机的逻辑像素进行页面布局(一个逻辑像素=一个css像素）。
需要手动配置。
在<head>中添加以下一句代码，开启理想视口。<meta name="viewport" content="width=decive-width,initial-scale=1.0"/>
3.2.3视觉视口
4、移动端常用单位
4.1-px：
绝对长度度量单位。
4.2-em：
相对度量单位，是跟当前标签的font-size有关。如font-size=14px，1em=14px。如果当前标签没有设置font-size，那么就找父元素的font-size，直到浏览器默认大小为止。ie全系支持。
4.3-rem：
直接以根标签（html）的font-size作为参考，如果HTML没有设置font-size，那么直接参考浏览器的默认大小。ie8不支持。
4.4-vw：
也是一个相对单位，指的是设备的视口宽度。1vw=视口宽度的1%，ie8不支持。
4.5-vh：
也是一个相对单位，指的是设备的视口高度。1vh=视口高度的1%
4.6-单位选择：
rem是用font-size来设置大小，所有更适合于文字大小的自适应。
vw和vh是相对于视口来处理，所以可以用来设置盒子的尺寸（width和height、margin、padding）
vw、vh因为是视口大小，没有大小限制，所以在宽高限制上还是要配合min-width和min-height来一起使用
一般针对于移动端，盒子的宽高会使用vw，因为一般手机的宽度不会相差很大，但高度差距比较明显
5、移动端兼容性
移动端页面实际参考的尺寸即该手机的逻辑像素
每个手机的逻辑像素不同，导致页面存在宽度不同，即页面宽度存在兼容性问题。
6、移动端实战
6.1原理：
以手机的逻辑像素为页面宽度，进行页面布局，而我们称这种针对移动端的布局方式叫移动端布局。
6.2适配移动端主流逻辑像素：
iPhone：320 375 414 480 android：360 ipad：768 1024 pc：992
6.3一般步骤
需保证页面使用的是理想视口，能够保证我们是以逻辑像素来进行布局
6.4移动端解决方案：
6.4.1—rem+弹性布局（或rem+流式布局）：
原理：利用屏幕的宽度不同利用媒体查询给HTML设置不同的font-size，移动端布局中的文字、盒子尺寸都用rem进行设置。对于一些比较特殊的盒子，比如（固定的，或者需要参考页面宽度的），可以使用vw、vh进行设置。
缺点：单独写一套代码，与pc端完全不同
6.4.2—响应式布局：
- 响应式布局是移动端友好，在pc端、移动端共用一套方案。
- 缺点：
— 不能很好的适配100%的手机屏幕
— 大量css代码，不便于维护
6.4.3—固定布局：
手机端页面内容固定宽度参考320或375，页面内容水平居中。
7、标准的移动端页面
需要设置页面的视口为理想视口，用户不能缩放，缩放比例为1.0
- 利用<meta>来设置
<meta name="viewport" content="width=decive-width,initial-scale=1.0,user-scalable：or"/> - width=decive-width：页面宽度=设备的逻辑像素，即使用理想视口。
- initial-scale=1.0：页面的默认比例为1.0。这保证了css中的一个px就等于手机页面中的一个px。
- user-scalable：yes或or；设置用户是否可以通过手势来进行缩放页面。建议不允许。
8、rem+弹性布局（或rem+流式布局）：
8.1—确定页面框架（div+HTML5标签）
8.2—确定页面的主要参考逻辑像素（375 360 768 1024），以此为基础确定HTML标签的font-size。
- 320px->font-size:30px;
- 375px->font-size:40px;
- 414px->font-size:50px;
8.3—开发页面（从上往下）
- 盒子的尺寸是以rem为基础。
- 需要利用媒体查询来设置当屏幕的逻辑像素不同时,HTML标签采用不同的font-size。
- 像具体的内容处理（img 表单元素 文字 超链接,,,)跟以前一样，并没有什么区别。
- 以rem代替px，百分比保留。
9、布局方案抉择
像文字比较多的页面可以参考使用rem解决方案，比如淘宝、王者荣耀
像图案比较多的，布局简单点，可以响应式布局，或者响应式+流式布局来搞定
