当前位置:  首页  >  前端开发  >  HTML

关于rem的宽度和高度不生效的问题分析-html教程

现在很多前端都用rem来单位元素和字体大小一般的设置是 html{font-size:62.5%; }换算来源1rem16px10160.625这样10px就等于了1rem 1.4rem14px(这样很好换算)1.6rem16px(这样很好换算)在chrome浏览器中有一个问题是字体小于12px统一都按12px&
现在很多前端都用rem来单位元素和字体大小

一般的设置是

html{

font-size:62.5%;

}

换算来源 1rem = 16px

10/16 = 0.625

这样10px 就等于了1rem

1.4rem = 14px (这样很好换算)

1.6rem = 16px (这样很好换算)

在chrome浏览器中有一个问题是字体小于12px统一都按12px

but 我们在计算元素的宽高是会出现问题

例如一个p的宽原先是100px 高是100px

按照我们原先的思想 width:10rem & height: 10rem

可是现实中没有达到我们的预期,真是的是 width:120px (width:10rem) && height: 120px(height:rem)

彻底懵逼了,怎么可能。。。。。

字体大小没有问题,为啥width和height不好使了。。。。。

原因在于chrome最小字体为12px,刚才已经提到过了,。。

我们在html中设置了font-size:62.5% ,(= 10px)真正的是 =12px

这时候我们知道原因了,可以这样设置

把 62.5% * 12

然后把原先的值统一除以 2

例如

html{

font-size:125%;

}

p{

font-size: 0.8rem; /*真实值: 16px 怎么来的 16/10/2=0.8*/

width: 5rem; /*真实值: 100px 怎么来的 100/10/2=5*/

}

如果算术不太好的怎么办

我们可以设置用100来换算

html{

font-size:625%;

}

p{

font-size: 0.16rem; /*真实值: 16px 怎么来的 16/100=0.16*/

width: 1rem; /*真实值: 100px 怎么来的 100/100=1*/

}

这样和一起的62.5% 换算差不多,就是有从除10变成了除以100

以上就是关于rem的宽度和高度不生效的问题分析的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有