发新贴  快速回复

关于rem换算问题

  银狐
2015-05-25 11:37
我设计稿 是640px 里面有一个按钮 是 30px
我设置了 html{font-size: 100px;}
那么代码里面 这个按钮 要写 多少 rem呢。求大神解答


 
summer
30/2/100,它说长度不够,我是来增加长度的。
2015-05-25 14:10  回复本帖
 
莫涛
 html{font-size: 100px;} 一般 不会固定写一个 font-size值 都是根据屏幕尺寸计算 一个font-size; 比如淘宝会根据你的屏幕尺寸width,分成16份也就是说html的font-size值是1/16屏幕宽度, 那设计图中的按钮的尺寸  .75rem
2015-05-25 15:20  回复本帖
 
银狐
forum.php?mod=redirect&goto=findpost&pid=39956&ptid=13580
html{font-size: 100px;} 一般 不会固定写一个 font-size值 都是根据屏幕尺寸计算 一个font-size; 比如淘 ...

老师,通过屏幕尺寸计算fontSize 我懂了,然后这个 0.75rem 是怎么计算出来的。有没有公式呢
2015-05-25 22:17  回复本帖
xiaoyutoxie
我理解的是大部分浏览器是16px ,而body换算以后: 1/16*100 = 62.5% 。12px = 1.2rem  
不换算就是0.0625x30px  = 1.875rem

2015-05-26 11:47  回复本帖
 
旋涡鸣人
 本帖最后由 旋涡鸣人 于 2015-5-27 11:38 编辑 

不过好像应该酱紫设置  rem好像是基于根元素html
html{
font-size:62.5%; /* 10÷16=62.5% */
}

body{
font-size:12px;
font-size:1.2rem ; /* 12÷10=1.2 */
}
2015-05-27 11:36  回复本帖
 
银狐
forum.php?mod=redirect&goto=findpost&pid=40009&ptid=13580
不过好像应该酱紫设置  rem好像是基于根元素html
html{
font-size:62.5%; /* 10÷16=62.5% */


你这样 还是不知道 怎么换算
2015-05-28 10:00  回复本帖
 
莫涛
设计图 640  也就是先在的屏幕尺寸640  一上来把html的字体大小定义为屏幕尺寸的1/16,在640的屏幕下html的font-size:40px; 那1rem=40px(640的屏幕下),按钮width 30px  30/40=0.75rem
2015-05-28 10:13  回复本帖
 
summer
forum.php?mod=redirect&goto=findpost&pid=40033&ptid=13580
设计图 640  也就是先在的屏幕尺寸640  一上来把html的字体大小定义为屏幕尺寸的1/16,在640的屏幕下html的f ...

为什么是1/16?
2015-05-29 12:03  回复本帖
 
莫涛
forum.php?mod=redirect&goto=findpost&pid=40063&ptid=13580
为什么是1/16?

个人习惯 1/10 等等都好,不过1/16出来的都是整数 比较好算
2015-05-29 14:35  回复本帖
 
银狐
forum.php?mod=redirect&goto=findpost&pid=40033&ptid=13580
设计图 640  也就是先在的屏幕尺寸640  一上来把html的字体大小定义为屏幕尺寸的1/16,在640的屏幕下html的f ...

明白了。多谢老师,感激不尽。最后还有一个小小的问题。字体大小 也是这么计算的吗?比方说 字体在设计稿是640px的尺寸下,是一个22px的字体大小。也是 22/40px=0.55rem 是吗?
2015-05-29 16:04  回复本帖
 
银狐
forum.php?mod=redirect&goto=findpost&pid=40063&ptid=13580
为什么是1/16?

1/16是个人喜好问题。你可以1/10,1/8等等
1是固定值。被除数可以你自己写。算出来方便以后计算就行
2015-05-29 16:06  回复本帖
 
银狐
forum.php?mod=redirect&goto=findpost&pid=40033&ptid=13580
设计图 640  也就是先在的屏幕尺寸640  一上来把html的字体大小定义为屏幕尺寸的1/16,在640的屏幕下html的f ...

然后我又发现了一个问题。当我宽高 都是通过rem计算出来的值之后, 手机横屏的时候。高度会变得很大。这要怎么解决
2015-06-01 11:18  回复本帖
 
莫涛
恩 在横屏 重新计算下 html的font-size值
2015-06-02 10:34  回复本帖
 
银狐
forum.php?mod=redirect&goto=findpost&pid=40131&ptid=13580
恩 在横屏 重新计算下 html的font-size值

老师,横屏下重新计算html的font-size值。需要判断设备是否是横屏,然后再去计算吗?还是说这段代码他在横屏下会给我自动计算。document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth/16 + 'px';但是 单单这段代码的情况下,手机横屏状态下,高度就会变得很大了。举个例子:
我高度是70px(在640px的设计稿的状态下)。换算成rem是1.75rem,在竖屏下是没有问题的。但在横屏的时候高度 会变得非常大。
2015-06-03 09:22  回复本帖
 
莫涛
横竖屏切换的时候屏幕宽度变了 都需要重新切换啊
2015-06-03 16:31  回复本帖
 
银狐
forum.php?mod=redirect&goto=findpost&pid=40230&ptid=13580
横竖屏切换的时候屏幕宽度变了 都需要重新切换啊

老师,怎么个重新切换
2015-06-03 17:00  回复本帖
 
莫涛
onorientationchange
2015-06-08 11:16  回复本帖
 
银狐
forum.php?mod=redirect&goto=findpost&pid=40382&ptid=13580
onorientationchange

多谢老师,我百度下
2015-06-09 10:47  回复本帖
登录 后才可以发表回复