移动端之动态改变rem的大小

1
js动态改变
!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };


    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);


}(document, window));


2
/*移动端适配 width|height|font-size = 视觉稿量出来的值 / 100rem;


美术以750px进行标注，以3倍尺寸，1125px 设计出图
以iphone 6 为基准屏幕，物理750px，进行开发及换算


开发换算：
iphone 6 为基准，美术按750px给的标注进行计算，font-size=100px,则 750 / 100 = 7.5rem 为屏幕总宽度换算
iphone 6 plus 渲染后的像素是1080px，所以1125px缩放后可用，通过rem计算，或viewport的device-width(375px,750/375=2倍)(414px,1080/414=2.6倍)匹配到屏幕大小


方案说明：
https://www.zhihu.com/question/25308946
http://blog.csdn.net/jeikerxiao/article/details/52768269
https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
https://www.zhihu.com/question/25288571
*/


@media screen and (min-width: 0px)   { html,body {font-size: 42.6667px !important; } }
@media screen and (min-width: 360px) { html,body {font-size: 48px !important;  } }
@media screen and (min-width: 375px) { html,body {font-size: 50px !important;  } }
@media screen and (min-width: 412px) { html,body {font-size: 54.9333px !important;  } }
@media screen and (min-width: 414px) { html,body {font-size: 55.2px !important;}}
@media screen and (min-width: 480px) { html,body {font-size: 64px!important;}}
@media screen and (min-width: 540px) { html,body {font-size: 72px!important;}}
@media screen and (min-width: 640px) { html,body {font-size: 85.333px!important;}}
@media screen and (min-width: 720px) { html,body {font-size: 96px!important;}}
@media screen and (min-width: 750px) { html,body {font-size: 100px !important;  } }
@media screen and (min-width: 768px) { html,body {font-size: 102.4px !important;  } }
@media screen and (min-width: 1024px){ html,body {font-size: 136.533px !important;}}
@media screen and (min-width: 1080px){ html,body {font-size: 144px!important;}}
@media screen and (min-width: 1440px){ html,body {font-size: 192px!important;}}
@media screen and (min-width: 2160px){ html,body {font-size: 288px!important;}}


body{
  margin: 0;  
  width: 7.5rem;
  margin: 0 auto;
}