（一）
由于手机生产商越来越多，不同手机的硬件尺寸又不尽相同，这就给我们的设计适配造成很大困扰。但我们可以围绕从基准分辨率设计，上下进行兼容适配的原则来进行快捷操作。以IOS阵营为例：
图注：移动适配流程
1. 将iphone6分辨率作为基准分辨率，以750px*1334px进行设计，设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。
2. 输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽度750px的设计标注图。
3. 开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6（375pt）的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其它尺寸。
4. 适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏适配。
（二）
就是整体缩放body，这个方案在兼容性上有 bug，建议不用
（三）web app变革之rem：rem能等比例适配所有屏幕
rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>rem phone test</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
html {
height: 100%;
100%;
font-family: 'Heiti SC', 'Microsoft YaHei';
font-size: 20px;
overflow: hidden;
outline: 0;
-webkit-text-size-adjust:none;
}
body {
height: 100%;
margin: 0;
overflow: hidden;
-webkit-user-select: none;
position: relative;
}
header,
footer {
100%;
line-height: 1.5rem;
font-size: 1rem;
color: #000;
border: 1px solid #ccc;
text-align: center;
background-color: #ccc;
}
.bd {
margin-top: 1rem;
margin-bottom: .5rem;
margin-right: -.5rem;
font-size: 0;
}
.box {
5rem;
height: 5rem;
display: inline-block;
margin-right:.5rem;
margin-bottom: .5rem;
}
.blue-box {
background-color: #06c;
}
.org-box {
background-color: #1fc195;
}
</style>
</head>
<body>
<header>我是头部</header>
<div class="bd">
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
<div class="box org-box"></div>
<div class="box blue-box"></div>
<div class="box org-box"></div>
</div>
<footer>我是页脚</footer>
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</body>
</html>
一般我们在做web app都会先统计自己网站有哪些主流的屏幕设备，然后去针对那些设备去做media query设置也可以实现适配，例如下面这样：
html { font-size : 20px; } @media only screen and (min- 401px){ html { font-size: 25px !important; } } @media only screen and (min- 428px){ html { font-size: 26.75px !important; } } @media only screen and (min- 481px){ html { font-size: 30px !important; } } @media only screen and (min- 569px){ html { font-size: 35px !important; } } @media only screen and (min- 641px){ html { font-size: 40px !important; } }
怎么计算出不同分辨率下font-size的值？
首先假设我上面的页面设计稿给我时候是按照640的标准尺寸给我的前提下，（当然这个尺寸肯定不一定是640，可以是320，或者480，又或是375）来看一组表格。
上面的表格蓝色一列是Demo3中页面的尺寸，页面是以640的宽度去切的，怎么计算不同宽度下font-site的值，大家看表格上面的数值变化应该能明白。举个例子：384/640 = 0.6，384是640的0.6倍，所以384页面宽度下的font-size也等于它的0.6倍，这时384的font-size就等于12px。在不同设备的宽度计算方式以此类推。
提问回答
1、请问，在底部用js改变html的font-size的话，会造成整个页面重新布局吗？实际使用中有没遇到页面元素因为尺寸改变了而闪烁的情况？
回答：会造成闪烁，但是可以现在css里根据屏幕 初始化一遍html 的font-size，然后在用js计算的话，区别不是很大。
例如：
@media only screen and (max- 320px){html{font-size: 9px;} }
@media only screen and (min- 320px) and (max- 352px){html{font-size: 10px;} }
@media only screen and (min- 352px) and (max- 384px){html{font-size: 11px;} }
@media only screen and (min- 384px) and (max- 416px){html{font-size: 12px;} }
@media only screen and (min- 416px) and (max- 448px){html{font-size: 13px;} }
@media only screen and (min- 448px) and (max- 480px){html{font-size: 14px;} }
@media only screen and (min- 480px) and (max- 512px){html{font-size: 15px;} }
@media only screen and (min- 512px) and (max- 544px){html{font-size: 16px;} }
@media only screen and (min- 544px) and (max- 576px){html{font-size: 17px;} }
@media only screen and (min- 576px) and (max- 608px){html{font-size: 18px;} }
@media only screen and (min- 608px) and (max- 640px){html{font-size: 19px;} }
@media only screen and (min- 640px){html{font-size: 20px;} }
2、
(function(doc, win) { var docEl = doc.documentElement, isIOS = navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1, dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放 resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’; docEl.dataset.dpr = dpr; var recalc = function() { var width = docEl.clientWidth; if (width / dpr > 1080) { width = 1080 * dpr; } docEl.dataset.width = width docEl.dataset.percent = 100 * (width / 1080); docEl.style.fontSize = 100 * (width / 1080) + ‘px’; }; recalc() if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); })(document, window);
以上，注意出现1080 的地方，这里改成设计图的宽度即可，这段代码的好处是根元素font-size是100 计算方便，若要给页面设置宽度 1080 = 10.8rem 640 = 6.4rem 等，字号的话直接根据设计图除以100即可
参考http://isux.tencent.com/web-app-rem.html
其它http://www.jianshu.com/p/eb05c775d3c6#