1、首先确定设计图是按照多少尺寸设计的，比如拿到的是iphone5 320px的设计图 屏幕宽度和设计图是1:1。
2、定义固定10为转换倍数，设置 html {font-size: calc(100vw/10);}。 这时不同屏幕大小时 html是等比放大缩小的，iphone5下html是32px。
//为什么设置为32px？ 你也可以设置为其它的值。但为了易于换算和记忆，我们默认为每种屏幕设置他的基础font-size=（屏幕宽度/10px）;
3、iphone5模拟器下 根据设计图做完静态页面，每个元素的的大小为 设计图尺寸/1/32=..rem。
//开发过程：如果是iphone6 750px 屏幕宽度和设计图是1:2
将每个元素设置的单位使用rem（任何原本使用px，em，pt的地方），数量为（设计图上的元素的实际px/2/37.5）rem；
4、查看其他模拟器下效果，大小自动等比缩放。
注：为了方便计算也可以设置 html {font-size: calc(100vw/3.2);} iphone5下html是100px。方便计算每个元素尺寸 直接除以100。
设置html大小的js:
(function() {
var newRem = function() {
var html = document.documentElement;
html.style.fontSize = html.getBoundingClientRect().width / 10 + 'px';
};
window.addEventListener('resize', newRem, false);
newRem();
})();
设置html大小的css:
@media (min-width: 320px){html{font-size: 32px;} }
@media (min-width: 360px){html{font-size: 36px;} }
@media (min-width: 375px){html{font-size: 37.5px;} }
@media (min-width: 384px){html{font-size: 38.5px;} }
@media (min-width: 414px){html{font-size: 41.4px;} }
@media (min-width: 448px){html{font-size: 44.8px;} }
@media (min-width: 480px){html{font-size: 48px;} }
@media (min-width: 512px){html{font-size: 51.2px;} }
@media (min-width: 544px){html{font-size: 54.4px;} }
@media (min-width: 576px){html{font-size: 57.6px;} }
@media (min-width: 608px){html{font-size: 60.8px;} }
@media (min-width: 640px){html{font-size: 64px;} }
@media (min-width: 750px){html{font-size: 75px;} }
@media (min-width: 800px){html{font-size: 80px;} }
@media (min-width: 1024px){html{font-size: 102.4px;} }
