rem

基准值: 可以看到,无论页面以哪种手机比例缩放,body的width都是7.5rem。很明显,目前网易的手机端设计稿是基于iPhone6,750(设计师给的设计稿是物理分辨率,会是我们写样式的逻辑分辨率的两倍,如果给的设计稿是640,那么是基于iPhone5,320),且基准值是100px(750/7.5=100)。这个基准值很关键,后面的css换算,都和这个基准值有关。动态font-size: 我们看到图1、图2、图3的font-size都有根据屏幕大小而动态改变,可以推算出公式:

屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50)

获取到这个值,再赋给html元素的style:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + ‘px‘;

这样就设置好了每个页面的根fonts-size,因为rem单位是基于根font-size,因此只要确定一种设计稿对应手机的换算,其余屏幕尺寸均可自动适配。

上面我们得出设计稿换算rem的基准值是100,因此只需要把设计稿上的px值除以100即为我们要的rem值。

> Px/100=rem,所以100px=1rem,25px=0.25rem
posted @ 2017-10-09 10:08  蓝稀稀  阅读(191)  评论(0编辑  收藏  举报