10-27：移动端适配是怎么做的

视口viewport
viewport指的是视口，他是浏览器或app中webview显示页面的区域。一般来讲PC端的视口指的是浏览器窗口区域，而移动端就有点复杂，它有三个视口：

layout viewport：布局视口
visual viewport：视觉视口
ideal viewport：理想视口

布局视口（layout viewport）
它是由浏览器提出的一种虚拟的布局视口，用来解决页面在手机上显示的问题。这种视口可以通过<meta>标签设置viewport来改变。移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。
我们可以通过document.documentElement.clientWidth来获取布局视口大小

视觉视口（visual viewport）
它指的是浏览器的可视区域，也就是我们在移动端设备上能够看到的区域。默认与当前浏览器窗口大小相等，当用户对浏览器进行缩放时，不会改变布局视口的大小，但会改变视觉窗口的大小。
我们可以通过window.innerWidth来获取视觉视口大小。

理想视口（ideal viewport）
理想中的视口。这个概念最早由苹果提出，其他浏览器厂商陆续跟进，目的是解决在布局视口下页面元素过小的问题，显示在理想视口中的页面具有最理想的宽度，用户无需进行缩放。所谓理想视口，即页面绘制区域可以完美适配设备宽度的视口大小，不需要出现滚动条即可正常查看网站的所有内容，且文字图片清晰，如所有iphone的理想视口宽度都为320px，安卓设备的理想视口有320px、360px等等。
当页面缩放比例为100%时，理想视口 = 视觉视口。
我们可以通过screen.width来获取理想视口大小。

meta viewport
对于移动端页面，可以采用<meta>标签来配置视口大小和缩放等。

1-rem适配
rem（font size of the root element）是CSS3新增的一个相对单位，是指相对于根元素的字体大小的单位。

2-vw、vh适配
vw（Viewport Width）、vh(Viewport Height)是基于视图窗口的单位，是css3中提出来的，基于视图窗口的单位。
vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。上面的flexible方案就是模仿这种方案，因为早些时候vw还没有得到很好的兼容。

3-flex弹性布局
弹性布局(flex container)，页面中任何一个元素只要设置了display:flex属性，那么当前盒子都称为弹性盒子。弹性盒子默认有两条轴: 默认水平显示的主轴 和 始终要垂直于主轴的侧轴(也叫交叉轴)，在弹性盒子中所有的子元素都是沿着主轴方向显示。
如果是pc端页面布局，采用传统方式
如果是移动端或是不考虑兼容的oc则采用flex

4-流式布局(百分比布局)
流式布局，就是百分比布局，也称非固定像素布局。
通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
注意事项：需要定义页面的最大和最小支持宽度。

5-@media
媒体查询 @media screen  可以通过不同媒体类型的不同屏幕大小，实现多套不同的样式，达到自适应的效果。缺点：配置多个响应断点，可能造成响应式断层问题，对用户不友好。