移动端web的适配方案

自适应（% rem vw/vh ）

响应式 这种适配方案通常来说一套代码，多端适用。是一种用来为各种分辨率和设备性能优化视觉体验的技术方案。多年前非常流行的Bootstrap就是一套非常好的响应式UI框架。主要通过媒体查询，弹性布局等手段来为从移动端到PC端由小变大的不同分辨率提供可伸缩性的页面布局效果。同样也会出现不同分辨率下呈现功能内容多少不同的现象。但总体会遵循主要内容永远保留的原则。

%适配

优点：

原理简单，无兼容性问题

缺点：

1：不适用于页面元素较多，较复杂的场景。

2：由于设备分辨率的跨度较大，元素的百分比不好把控，可能出现元素拉伸变形的问题。

3：字体大小无法自适应。

vw、vh适配

vw : 1vw 等于 视口宽度 的 1%，即100vw等于视口宽度

vh : 1vh 等于 视口高度 的 1%，即100vh等于视口高度

vmin : 选取 vw 和 vh 中 较小 的那个

vmax : 选取 vw 和 vh 中 较大 的那个

rem布局 移动适配

css3中rem 只修改根元素（html）就成比例地调整所有字体大小 只有ie8以下不兼容

1rem=1Html字号大小

rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10

也可以用flexible.js 是手淘开发出的一个用来适配移动端的js框架

核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size；就是来代替很多个@media。

vw/vh也是差不多

font-size为calc(100vw / 375)

响应式设计

能够自动隐藏/部分显示的内容：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏：

能自动折叠的导航和菜单：展开还是收起，应该根据页面尺寸来判断：

viewport适配的原理

通过 <meta name="viewport"> 给视口设置固定的宽度，浏览器对页面自动缩放来实现页面的适配效果

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

● width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

● initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

● minimum-scale：允许用户缩放到的最大比例。

● user-scalable：用户是否可以手动缩放。

viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的。但是css像素和物理像素的比例是不一样的，等比的

viewport适配的优缺点

● 可以使用px 不用额外进行rem或者vw等单位换算

● 缺点破坏完美视口