动态计算 rem

沁染流年

已于 2023-06-20 09:38:13 修改

阅读量65

点赞数

分类专栏：前端文章标签：前端

于 2022-11-23 11:03:09 首次发布

本文链接：https://blog.csdn.net/weixin_49210760/article/details/127996429

版权

前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

const ua$1 = navigator.userAgent.toLowerCase();
const isMobile = (/ios|iphone|ipod|ipad|android/).test(ua$1);

export const flexible = (dm, maxWidth, minWidth) => {
  const domEl = window.document.documentElement;
  let timer = null;
  let refresh = null;

  const refreshMobile = () => {
    let width = window.innerWidth;
    if (width >= maxWidth) {
      width = maxWidth;
    }
    if (width <= minWidth) {
      width = minWidth;
    }
    const rem = width / (dm ? dm : 3.75);
    domEl.style.fontSize = ''.concat(rem, 'px');
  };

  const refreshPC = () => {
    let width = window.innerWidth;

    if (width >= maxWidth) {
      width = maxWidth;
    }

    if (width <= minWidth) {
      width = minWidth;
    }

    const rem = width / (dm ? dm : 19.2);
    domEl.style.fontSize = ''.concat(rem, 'px');
  };

  if (isMobile) {
    refresh = refreshMobile;
  } else {
    refresh = refreshPC;
  }

  refresh();
  window.addEventListener('resize', () => {
    timer && clearTimeout(timer);
    timer = setTimeout(refresh, 400);
  });
  window.addEventListener('pageshow', () => {
    refresh();
  });
};

export default flexible;