使用rem

庚辰腊七木头鱼

于 2022-03-23 11:25:35 发布

阅读量143

点赞数

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_46235143/article/details/123681565

版权

简介

rem作为一个单位, 经过合理的换算, 就可以当px一样使用.

公式

rem = (designWidth/windowWidth）* 100
这里的100为我们在设计图中设置的1rem的大小，也叫基准值。

跟随窗口变换的代码

$(function(){
  function setRem(){
    var windowWidth = $(window).width();
    console.log(windowWidth);
    var rem = parseInt(windowWidth/750*100)+'px';
    $('html').css('font-size',rem);
    console.log(rem)
  }
  setRem();
  var timer;
  $(window).on('resize',function(){
    timer=setTimeout(function(){
      clearTimeout(timer);
      setRem();
    },50)
  })
})

参考链接: