2019-06-28 移动端rem用法

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;} }