移动端开发rem基数的计算

再移动端开发过程中,不同机型的屏幕适配一直都是一个需要重视的问题,在 rem 之外,一般会采用以下方式:

  • 固定高度,宽度充满
  • 使用百分比进行布局或 flex 布局
  • 使用 css 媒体查询方式

rem 实现方式

rem(font size of the root element)也就是在根元素固定一个值,然后所有的宽度,高度单位都用 rem 表示。这样浏览器在渲染过程中会获取根元素的值,以根元素上的值为基础,计算出所有使用 rem 单位的值,这样在大小不一屏幕上都会有相应的变化!

rem 计算方法

rem 的计算建议根据视觉稿来计算。

如果视觉稿的大小为 750px,那么我们可以给他一个基数,当然这个基数是随意的,是你自己定的。但是如果基数过小,比如基数为 1,那么基准值就是 750(750px/1),

我们需要根据当前机型的可视宽度来计算在根元素的值的大小,如果上面基准值是 750,那么

根元素的值 = 屏幕可视宽度/基准值 # 由此,上面的根值大小为(以屏幕可视宽度 375px 为例,也就是普通 ihone6 的屏幕大小) 375/750 = 0.5px;
现在根元素的大小为 0.5px,如果现在有一个 button,button 的大小为 100px*30px,转化为 rem 后即:

1
2
100px/0.5px = 500rem
30px/0.5px = 60rem

这样其实并没有什么问题,只是数值有点大,一般为了便利,都不会让数值太大
所以上面的基数应该给小一点,为了计算方便,一般基数为 10,或者 100。

如果基数为 100,那么基准值就应该是

7.5(750px/100)

如此根元素的值应该是

50(375/7.5)

那么 button 转化为 rem 后就应该是

(2rem*0.6rem)

这样会稍微方便点,有木有……

注意:移动端,UI 视觉稿是移动端网页的两倍

网页设计图纸设计的是:物理像素,即:屏幕实际的像素点;

移动端显示的是:逻辑像素,即:手机屏幕可以现实的像素点。

例如:iPhone6 采用了 750px _ 1334px 分辨率的屏幕,逻辑像素是 375px _ 667px。

代码参考

1
2
3
4
5
6
7
8
9
10
11
12
13
(function(document, window) {
var ele = document.documentElement,
resize = "orientationchange" in window ? "orientationchange" : "resize",
recalcFun = function() {
var clientWidth = ele.clientWidth;
if (!clientWidth) return;
ele.style.fontSize = clientWidth / 7.5 + "px";
};

if (!document.addEventListener) return;
window.addEventListener(resize, recalcFun, false);
document.addEventListener("DOMContentLoaded", recalcFun, false);
})(document, window);