使用rem制作响应式网站

1.rem可以适配不同分辨率

具体来说，有的屏幕640px宽。有的750px宽，有的甚至更大或者更小，如果是用固定的px单位，要么导致大的放不下，或者是小的很难看。
如果元素大小固定占屏幕的百分之X就可以解决问题了。
比如640px的10%是64px，750px的10%是75px。
如果10个10%宽度的元素放在一起，就会正好铺满整个屏幕，不会超出也不会留白。
简单理解
rem就是指屏幕宽度的百分之X
或者说，n个rem = 用户可视区域100%宽度
注意：之所以不说高度，是因为高度（屏幕纵向）方向的内容可以通过滚动屏幕来查看。

文字实例理解
1.设计师给定了一个640px宽度的设计图。
2.假定64rem = 100%宽度（这里是640px），那么1rem = 10px。
3.按照这种比例写出了静态页面，将设计图上的元素大小，全部用rem写下。
4.可以看到静态页面在640px宽度的页面上显示正常。
5.某用户使用的是320宽度的手机，因为你假设的64rem = 100%宽度，因此此时1rem = 5px(320 / 64 = 5)，因此也完美的显示。

2.rem的使用方法

1.rem是css单位；
2.1rem的大小是通过html下的font-size这个css属性告诉浏览器的；
3.使用rem替换px所在的位置即可。
假设预设的1rem = 10px，然后一个元素（class = ‘ele’）的宽度是20px，高度是30px，那么css写成下面的格式：

html{
        font-size: 10px;
}
.ele{
        width: 2rem;
        height: 3rem;
}

3.应用到各种分辨率下

发现问题了吗？由于屏幕分辨率各不一样，因此我们没有办法确定1rem等于多少px。
原因是rem是css中使用的单位，css是不会帮忙计算1rem等于多少px，只能通过自己来计算。
计算方式很简单：
1.设计稿A（假定是640px），有一个预设的rem和px的比例B（假如是1rem = 10px）
2.获取用户浏览器的可是区域的宽度C（假如是320px）,那么此时1rem的尺寸D可以根据B/A = D/C这个公式计算出来
3.原因是假定的屏幕可以容纳多少个rem，这是一个固定的比例（如这里就是64rem）

1rem = B / A * C;
//代入可得
1rem = 10px / 640px * 320px = 5px;

4.其他

1.页面加载前就得设置好1rem的尺寸（记得是设置在html元素下的font-size）；
2.加载完成后，用户的页面尺寸可能会改变（这种情况往往是出现在PC端，我们需要重新设置1rem等于多少px）
整体的代码如下，直接复制使用，放到页面的head里面。

<script>
        var fun = function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    //这里是假设在1920px宽度设计稿的情况下，1rem = 100px；
                    // 可以根据实际需要修改
                    docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
            };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        };
        fun(document, window);
    </script>

rem的上段写法多种多样，原理万变不离其宗，在贴出一种笔者使用过的方法，个人习惯讲1rem设置成100px。由于PC端和移动端往往是两套UI，故通过判断屏幕大小区分PC端和移动端，进而计算出1rem等于多少px，这里使用的是$(window).width()判断的，也可以使用if ( window.innerWidth>1080) 来判断：

$(window).resize(function ()// 绑定到窗口的这个事件中
    {
        if($(window).width() >= 1000){
            let designSize = 1920; // 设计图尺寸
            let html = document.documentElement;
            let wW = html.clientWidth;// 窗口宽度
            let rem = wW * 100 / designSize;
            document.documentElement.style.fontSize = rem + 'px';
        }else{
            let designSize = 750; // 设计图尺寸
            let html = document.documentElement;
            let wW = html.clientWidth;// 窗口宽度
            let rem = wW * 100 / designSize;
            document.documentElement.style.fontSize = rem + 'px';
        }
    });
    $(window).ready(function ()// 绑定到窗口的这个事件中
    {
        if($(window).width() >= 1000){
            $('.container').show().prev().hide();
            let designSize = 1920; // 设计图尺寸
            let html = document.documentElement;
            let wW = html.clientWidth;// 窗口宽度
            let rem = wW * 100 / designSize;
            document.documentElement.style.fontSize = rem + 'px';
        }else{
            let designSize = 750; // 设计图尺寸
            let html = document.documentElement;
            let wW = html.clientWidth;// 窗口宽度
            let rem = wW * 100 / designSize;
            document.documentElement.style.fontSize = rem + 'px';
        }
    });