发新贴  快速回复

关于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
onorientatierr=

多谢老师,我百度下
2015-06-09 10:47  回复本帖
妙味用户239967
var Ohtml=document.getElementsByTagName('html')[0];
function getResize(){
var Oh=document.documentElement.clientWidth;
if(Oh<=320){
Ohtml.style.fontSize=32+'px';
}else{
Ohtml.style.fontSize=Oh/10+'px';
}
}
我想 知道 这样写行不行 靠谱吗
2018-01-27 21:04  回复本帖
ら樱雪之城ペ

妙味用户239967 2018-01-27 21:04发表的内容:

var Ohtml=document.getElementsByTagName('html')[0];
function getResize(){
var Oh=document.documentElement.clientWidth;
if(Oh<=320){
Ohtml.style.fontSize=32+'px';
}else{
Ohtml.style.fontSize=Oh/10+'px';
}
}
我想 知道 这样写行不行 靠谱吗
一般,不过这样有的时候字体就成小数了,像素单位尽量是整数,没有0.5个像素的时候,要是你的oh=32,不就成3.2px了?建议不要这样
2018-04-01 14:14  回复本帖
 
Ro丶宿命

你640设置根元素html大小为100。按钮30px。换算出来就是0.3rem即可。页面所有元素除以100

2018-04-08 15:20  回复本帖
妙味用户847587

根据设计图来决定的。

2018-04-11 10:22  回复本帖
phone木子
window.err==window.err= = function(){
	var WidthC=document.documentElement.clientWidth;
	if(WidthC>750){//1rem=37.5px
		document.documentElement.style.fontSize = 750/20+'px';
	}
	if(WidthC<750){
		document.documentElement.style.fontSize = WidthC/20+'px';
	}
};
请问大神们这样写可以吗,设计稿是750的,但是我看到的缺点就是这个1rem=37.5px,每次都要计算器来算
2018-06-20 10:24  回复本帖
狐狸

phone木子 2018-06-20 10:24发表的内容:

window.err==window.err= = function(){
	var WidthC=document.documentElement.clientWidth;
	if(WidthC>750){//1rem=37.5px
		document.documentElement.style.fontSize = 750/20+'px';
	}
	if(WidthC<750){
		document.documentElement.style.fontSize = WidthC/20+'px';
	}
};
请问大神们这样写可以吗,设计稿是750的,但是我看到的缺点就是这个1rem=37.5px,每次都要计算器来算
你可以用 less 来写 css,定义一个变量,每次量取设计稿的宽或者高,除以定义好的变量,less 会帮你计算,
2018-07-14 21:21  回复本帖
 
莫涛

html {
    font-size: 13.3333vw;
}

2018-09-10 17:33  回复本帖
妙味用户405300

Ro丶宿命 2018-04-08 15:20发表的内容:

你640设置根元素html大小为100。按钮30px。换算出来就是0.3rem即可。页面所有元素除以100

怎么设置根元素html大小为100呢?
2019-06-14 13:43  回复本帖
登录 后才可以发表回复