前端响应式布局 样式单位 rem

什么是rem？

---

rem是根元素字体的单位，比如 html{font-size:16px;} ，1rem相当于16px。

什么是响应式布局

---

1. 内容区块 可伸缩
2. 内容区块可自由排布
3. 边距适应：到页面尺寸发生更大变化时，区块的边距也应该变化
4. 图片适应：对于常见的宽度调整，图片在隐去两侧部分时，依旧保持美观可用
5. 内容能够自动隐藏/部分显示：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏
6. 导航和菜单能自动折叠：展开还是收起，应该根据页面尺寸来判断
7. 页面尺寸发生变化时，字体也等比例缩放

如何使用

---

1. 给html元素设置字体大小 html{font-size:100px;}
2. 页面绑定监听事件尺寸变化时动态的设置html的font-size

//改变font-size
(function(doc,win){
    var docEI = doc.documentElement,
    resizeEvt = 'orientationchange' in window?'orientataionchange':'resize',
    recalc = function(){
        var clientWidth = docEI.clientWidth;
        if(!clientWidth) return;
        //100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
        docEI.style.fontSize = 100*(clientWidth/1536)+'px';
    }

    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document,window);
复制代码

3. 可以使用手淘的lib-flexible.js；同样可以使用npm安装，具体的用法可以参考手淘的demo www.npmjs.com/package/fle…

转载于:https://juejin.im/post/5afe6bf86fb9a07abb23d96c