欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

3分钟读懂移动端rem使用方法(推荐)

程序员文章站 2023-12-01 11:50:40
1、为什么要用rem 博客很久没写了,原因很简单。 最近接手了一个项目,要同时做pc和移动端的页面,之前没接触过,但毕竟给钱的是大爷,所以还是硬着头皮上了。 移动端最...

1、为什么要用rem

博客很久没写了,原因很简单。

最近接手了一个项目,要同时做pc和移动端的页面,之前没接触过,但毕竟给钱的是大爷,所以还是硬着头皮上了。

移动端最麻烦的是什么?

不同分辨率适配!

具体来说,有的屏幕320px宽,有的屏幕640px宽,有的更宽,如果你写固定px,那么要么小的放不下,要么大的有大片空白。

怎么办?

如果元素固定占用屏幕空间(一般是指宽度而非高度,下同)的百分之xx就ok了。

比如320px的10%是32px,640px的10%是64px,

如果10个10%宽度的元素放在一起,那肯定就是100%,即挤满屏幕(宽度),不会超出,也不会留白。

简单理解:
rem 就是指屏幕宽度的百分之x;
或者说,n个rem = 用户可视区域100%宽度

注意,之所以不说高度,是因为宽度(x轴)满了后,y轴(高度)方向的内容可以通过滚动屏幕来查看

上实例:

1、设计师给一个640px宽度的设计图,

2、你假定64rem=100%宽度(这里是640px),那么1rem=10px;

3、你照着写出了静态页面,然后按照1rem=10px的比例,将设计图上的元素的大小,全部用rem写下;

4、完美,你写的静态页面在640px宽度的页面上正常展示了;

5、a用户使用的是320px宽度的手机,因为你假设64rem=100%宽度,因此此时1rem=5px(320/64=5),于是也完美展示了;

2、rem怎么用?

rem是css单位;
1rem的大小是通过html下的font-size这个css属性告诉浏览器的;
使用替换px所在的位置即可
假定你预设在设计稿的时候 1rem = 10px;

然后一个元素(class=”ele”)的宽度是20px,高度30px(设计稿),

那么你的css这么写就可以了;

html {
  font-size: 10px;
}

.ele {
  width: 2rem;
  height 3rem;
}

3、在任何分辨率下都适用

发现问题在哪里了么?如何确认1rem等于多少px?

原因是rem是css中使用的单位,css是不会帮你计算1rem是多少px的,只能通过你自己来计算。

计算方式很简单,简单来说:

1、你有一个设计稿a(假定640px),有一个预设的rem和px的比例b(假如是1rem = 10px)

2、获取用户浏览器的可视区域的宽度c(假如是320px),那么他此时1rem的尺寸d 可以根据 b/a = d/c 这个公式得知

3、原因是你假定屏幕可以容纳多少个rem,这是一个固定比例(如这里就是64rem)

1 rem = b / a * c;
//代入可得
1 rem = 10px / 640px * 320px = 5px;

4、其他

1、用户加载完后,你就得设置好1rem的尺寸吧(记得是设置在html元素下的font-size);

2、假如用户屏幕的尺寸会变,你肯定得考虑吧(刷新1);

3、你懒得去找相应的代码,我总得给你吧(如下);

var fun = function (doc, win) {
  var docel = doc.documentelement,
    resizeevt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientwidth = docel.clientwidth;
      if (!clientwidth) return;

      //这里是假设在640px宽度设计稿的情况下,1rem = 20px;
      //可以根据实际需要修改
      docel.style.fontsize = 20 * (clientwidth / 640) + 'px';
    };
  if (!doc.addeventlistener) return;
  win.addeventlistener(resizeevt, recalc, false);
  doc.addeventlistener('domcontentloaded', recalc, false);
}
fun(document, window);

直接执行即可

以上所述是小编给大家介绍的rem使用方法详解整合,希望对大家有所帮助