rem适配

function refrehRem() {

    // 1. 获取屏幕的大小

    let clientWidth = document.documentElement.clientWidth;

    // 2. 将屏幕等分, 等分的目的:降低单位rem值的大小, 便于后期换算,提高精确度

    let rem = clientWidth / 10; // 淘宝方案

    // rem = 37.5

    // 3. 等分的结果作为rem值的大小设置给html标签

    document.documentElement.style.fontSize = rem + 'px';

    // 4. body设置fontsize,为的是标注em字体的大小

    document.body.style.fontSize = '12px';

  }

  window.addEventListener('pageshow', function () {

    refrehRem();

  })

  var timeoutId;

  window.addEventListener('resize', function () {

    if(timeoutId) clearTimeout(timeoutId);

    timeoutId = setTimeout(function () {

      refrehRem()

      console.log('resize');

    }, 1000)

  }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 目前主流的移动端适配用rem的偏多,接下来说一说关于rem的适配问题吧。。。 需要的功能:设计图用于不同的设备,效...
    度_琪阅读 697评论 0 0
  • rem是什么? rem(fontsizeoftherootelement)是指相对于根元素的字体大小的单位。简单的...
    yuanjiex阅读 4,146评论 0 0
  • 随着移动端的发展,rem的用途越来越广泛,很好的解决了px无法适配移动端的问题。因为rem是以根节点来计算的,在根...
    像风一样自由2017阅读 1,016评论 0 1
  • https://www.cnblogs.com/annie211/p/8118857.html[https://w...
    南土酱阅读 1,700评论 0 1
  • 小时候 日子很慢 妈妈的毛衣 温暖了一个冬天 长大后 日子很快 肩上的背包 塞满了我的人生 日子啊 请你走慢一点 ...
    开心同学阅读 257评论 2 1