1，rem的原理

rem：是css的一个相对单位 相对于html根元素，
可以通过监测屏幕大小改变html的字体大小从而实现自适应大小的效果，相对于根元素(即 html 元素)font-size 计算值的倍数。

先按定高宽设计出来页面，然后转换为rem单位，实现完美自适应。例： a 标签的 font-size 值为 0.5rem，实际就是 100px*0.5 = 50px。

2，什么是动态布局

就是移动端项目适配不同的屏幕的大小，因为市场上手机有很多，屏幕大小也不同。
所以要使用动态布局让每个手机看起来尽量一样。就是动态布局（移动端适配），
明白了原理后，我们就可以使用这个特点来进行适应布局了

3，按照设计稿设计

//例如设计稿是按照750px设计的
// 设置动态rem布局
(function(doc,win){
    var docEl = doc.documentElement,
    resizeEvt="orientationchange" in window ? "orientationchange" :"resize",  //兼容问题
    recalc = function(){
        if(docEl.clientWidth > 750){
            docEl.style.fontSize= "100px";
            doc.getElementById("app").style.width = "750px";
        }else{
            var width = docEl.clientWidth / 7.5;
            docEl.style.fontSize=width + "px";
            doc.getElementById('app').style.width="auto";
        }
    }
    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt,recalc, false);
    doc.addEventListener("DOMContentLoaded",recalc, false);
})(document, window)

以下是网上博主写的，感觉写的很好，引用了：

<script>
		/*设置根元素<html>字体大小*/
		function getRem() {
			var html = document.getElementsByTagName("html")[0]; /*获取标签元素<html>*/
			var oWidth = document.body.clientWidth || document.documentElement.clientWidth; /*获取设备的宽度  ||后为兼容IE低版本写法*/
			html.style.fontSize = oWidth / 6.4 + "px"; /*设置根元素<html>字体大小   计算出的值 就相当于1rem;为什么？ 这就是rem单位的规定 1rem就等于根元素<html>字体大小*/
		}
 
		/*6.4: 为设计稿宽度640px; 若是750px的设计稿 只需要将6.4改为7.5即可。
		 * 在手机屏幕宽度与设计稿一致时，即：oWidth = 750px 那么上面的计算 oWidth / 6.4 + "px" 结果就是100px;  html.style.fontSize = 100px 
		 *css3中规定 1rem就对应这<html>的font-size的大小，所以100px = 1rem 这样方便大家将px转化为rem 按照这个比例来设置字体大小、元素宽高、内外边距等的单位为rem;
		 *举例：在设计稿中，某一行字体大小为14px,则我们需要在css文件中将对应的字体设置为0.14rem;
		 *      在设计稿中，某一个元素宽高分别为 100px与20px;则我们需要在css中将对应的宽高设置为1rem与0.2rem;
		 */
 
		/*页面初始化调用getRem()*/
		window.onload = function() {
			/*初始化*/
			getRem();
			/*getRem绑定监听*/
			window.addEventListener("resize", getRem, false);
		};
	</script>


export default function() {
    // 7.5根据设计稿的横向分辨率/100得来
    var deviceWidth = document.documentElement.clientWidth;
    // var deviceWidth = window.screen.availWidth
    // console.log(navigator.userAgent)
    // console.log(deviceWidth)
    // console.log(navigator.userAgent)
    if(deviceWidth > 750) {
        // deviceWidth = 750;
        deviceWidth = 7.5 * 100;
    }

    document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';

    // 禁止双击放大
    document.documentElement.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
            event.preventDefault();
        }
    }, false);
    var lastTouchEnd = 0;
    document.documentElement.addEventListener('touchend', function (event) {
        var now = Date.now();
        if (now - lastTouchEnd <= 300) {
            event.preventDefault();
        }
        lastTouchEnd = now;
    }, false);
}