使用rem作为css响应式布局单位

2019-10-18  本文已影响0人  手指乐
(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            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);
  1. 定义一个function并调用自己,传入document和window两个参数
  2. document.documentElement == document.querySelector('html'),获取html元素,由于fontsize的继承性,所有元素默认fontsize都取这个
  3. 监听屏幕旋转、resize、DOMContentLoaded事件,发生这些事件,则重新根据新的视口大小调整根元素的fontsize
  4. 网页中要定义viewport的宽度为device-width,把viewport大小设置为设备的逻辑宽度,否则viewport会固定为一个值(iphone手机浏览器是980),就做不到响应式了
  5. 此处设置在设备逻辑宽度为320的机器上,根元素的fontsize为20px
  6. 一个元素高度要设置为40px,只需要考虑逻辑宽度为320的机器,设置为2rem即可,其他逻辑宽度的机器或按比例缩小或放大
...
import './config/rem'
...

import './config/rem' 作用不是引入模块(这里不需要引入模块),只会执行一遍rem.js

上一篇 下一篇

猜你喜欢

热点阅读