现在很多前端都用rem来单位元素和字体大小
一般的设置是
html{
font-size:62.5%;
}
换算来源 1rem = 16px
10/16 = 0.625
这样10px 就等于了1rem
1.4rem = 14px （这样很好换算）
1.6rem = 16px （这样很好换算）
在chrome浏览器中有一个问题是字体小于12px统一都按12px
but 我们在计算元素的宽高是会出现问题
例如一个div的宽原先是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
采用 php+mysql 数据库方式运行的强大网上商店系统，执行效率高速度快，支持多语言，模板和代码分离，轻松创建属于自己的个性化用户界面 v3.5更新： 1).进一步静态化了活动商品. 2).提供了一些重要UFT-8转换文件 3).修复了除了网银在线支付其它支付显示错误的问题. 4).修改了LOGO广告管理,增加LOGO链接后主页LOGO路径错误的问题 5).修改了公告无法发布的问题,可能是打压
0
然后把原先的值统一除以 2
例如
html{
font-size:125%；
}
div{
font-size: 0.8rem; /*真实值： 16px 怎么来的 16/10/2=0.8*/
width: 5rem; /*真实值： 100px 怎么来的 100/10/2=5*/
}
如果算术不太好的怎么办
我们可以设置用100来换算
html{
font-size:625%；
}
div{
font-size: 0.16rem; /*真实值： 16px 怎么来的 16/100=0.16*/
width: 1rem; /*真实值： 100px 怎么来的 100/100=1*/
}
这样和一起的62.5% 换算差不多，就是有从除10变成了除以100
以上就是关于rem的宽度和高度不生效的问题分析的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
C++高性能并发应用_C++如何开发性能关键应用
Java AI集成Deep Java Library_Java怎么集成AI模型部署
Golang后端API开发_Golang如何高效开发后端和API
Python异步并发改进_Python异步编程有哪些新改进
C++系统编程内存管理_C++系统编程怎么与Rust竞争内存安全
Java GraalVM原生镜像构建_Java怎么用GraalVM构建高效原生镜像
Python FastAPI异步API开发_Python怎么用FastAPI构建异步API
C++现代C++20/23/26特性_现代C++有哪些新标准特性如modules和coroutines
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
117
