关于对rem的理解,这样对不对?

来源:3-1 自适应rem布局

roastwind

2016-01-19 20:19

纠结了n久,终于明白了【docEl.style.fontSize = 12* (docEl.clientWidth / 320) + 'px'】想表达什么意思,就是说手机屏幕320px下font-size以12px作为根元素的标准大小,其他的不一样屏幕宽度则以相对比例进行缩放,所以调试页面的时候,就要在宽度320,并设置字体大小为12px,这种情况下画出来的页面什么样子,然后在其他不同尺寸的屏幕上、或者横竖屏显示的页面就是什么样子了(不同尺寸缩放)。

写回答 关注

2回答

  • roastwind
    2016-01-19 21:07:16

    这里的12只是拿来打个比方了,不知道是不是屏幕320里面根元素的font-size设为20px,是不是设计师常用的比例稿,这样算的话,demo中的.page中的font-size就是0.3*20=6px的像素了。看了一下前面几个的问题,好像都是在迷惑这同一个问题,这个确实是webapp中挺重要的一个问题了吧。

  • roastwind
    2016-01-19 20:54:13

    这时候,1rem=12px,然后5rem,就是60px;

    然后可以先以px布局,然后换算成rem,或者用less编译工具写一个公共函数来进行rem与px之间的转换;

    这里面的道道居然还有很多,看完网友 @MasqueZe 说的 http://www.data321.com/fe659370这篇文章,瞬间感觉啥都不会了

H5+JS+CSS3 实现圣诞情缘

为圣诞节准备的H5+JS+CSS特效案例教程,实现静与动的结合

122038 学习 · 211 问题

查看课程

相似问题