rem手机自适应框架

rem是按照html的字体大小来 所以 不同宽度浏览器 htmlfont-size不一样 就可以做到自适应了 此方法比百分比方便

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <div style="width:10rem; height:10.2rem; background: #000;"></div>
 <div style="width:10.6rem; height:10.3rem; background: #F00;"></div>
</body>

<script>
    (function (doc, win) {
        var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                      /*   var clientWidth = docEl.clientWidth;*/
                     var clientWidth = parseInt($('body').width());
                    if (!clientWidth) return;
                    docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
                };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>
</html>

ps:这个rem使用需要注意 这个js函数不是立马执行的 所以刚开始加载的时候最好加个进度条 或者用百分比 不然就会出现 js没执行完的rem效果 然后又出现js执行完加了rem的效果

正则表达式*和+的区别

先看如下例子
字符串caxsaxx
正则表达式xs*
共找到 2 处匹配:
xs
x

注意x和s*是分开的

他在xs+匹配的基础上 又增加了x的匹配(ps 有x是因为s*支持0次匹配 就是什么都不匹配 自然就剩下x了)

再看下面

正则表达式xxs*
共找到 1 处匹配:
xx

他在xxs+匹配的基础上 又增加了xx的匹配

正则表达式caxf*
共找到 1 处匹配:
cax
在caxf+ 匹配的基础上又增加了cax的匹配

现在应该找出规律了吧

?这个自然就是匹配0次到1次啦