rem使用的方法

最新推荐文章于 2024-05-16 00:31:06 发布

是欢欢啊

最新推荐文章于 2024-05-16 00:31:06 发布

阅读量287

点赞数 1

分类专栏： JS相关

本文链接：https://blog.csdn.net/bznhlhh/article/details/107054572

版权

JS相关专栏收录该内容

42 篇文章 0 订阅

订阅专栏

移动端中关于rem的适配

具体代码如下：

const setHtmlFontSize=()=>{
  const htmlDom = document.getElementsByTagName('html')[0];
  let htmlWidth = document.documentElement.clientWidth||document.body.clientWidth;
  if(htmlWidth >=750){
    htmlWidth = 750;
  }
  if(htmlWidth <=320){
    htmlWidth = 320;
  }
  htmlDom.style.fontSize = `${htmlWidth/750}px`;
//  后面需要加table键上面的那个字符（``），也叫作模板字符串，从＄开始到px结束
  //在750px的手机屏幕下，1rem = 1px；
  //同理，如果是`${htmlWidth/375}px`，则表示在375的屏幕设备下，1rem = 1px；
}
window.onresize = setHtmlFontSize;
setHtmlFontSize();