css3中rem是什么意思

css3中rem是什么意思,第1张

css3中rem是什么意思

css3中的rem是一个相对单位,是相对根元素字体大小的单位;使用rem的优点就是在计算子元素有关的尺寸时,只要根据html元素字体大小来计算即可。

本文 *** 作环境:windows7系统、CSS3版、Dell G3电脑。

css3中rem是什么意思?

css3中rem详解

rem:是一个相对单位,相对根元素字体大小的单位,再直白点就是相对于html元素字体大小的单位。

优点:这样在计算子元素有关的尺寸时,只要根据html元素字体大小计算就好。不再像使用em时,得来回的找父元素字体大小频繁的计算,根本就离不开计算器。

刚刚做完一个移动端的项目有一些使用的小收获在这里分享一下,也许大家已用过。如果有欠妥的地方,欢迎讨论。

html的字体大小设置为font-size:62.5%原因:浏览器默认字体大小是16px,rem与px关系为:1rem = 10px,10/16=0.625=62.5%,为了子元素相关尺寸计算方便,这样写最合适不过了。只要将设计稿中量到的px尺寸除以10就得到了相应的rem尺寸,方便极了。当然,直接将html元素设置为10px,也是可以的。只是习惯了62.5%。找了个参考图,方便参考。如下:


说说项目中遇到的问题吧。

按照习惯写法,代码如下:

html { font-size:62.5%; }
.menu{ width:100%; height:8.8rem; background:#000; line-height:8.8rem;color:#fff;font-size:3.2rem; text-align:center; }

调试工具:chrome

效果图尺寸如下:

高度不应该是88吗,为什么大了那么多,chrome在字体小于12px时都当12px 处理,这个坑呀。8.8*10=88,8.8*x=105.59,计算结果x=11.999,浏览器计算会存在误差,正好不就12px嘛。

绕过这个坑,直接将html字体大小设置为625%,即100px。再看下效果。


可爱的88回来了,绕过了chrome的12px死穴。

设备适配:

很简单的哟,这个项目设计稿是640,就直接将640作为参考,html字体设置为625%。88px就可以直接换算为.88rem;适配其他尺寸的设备,比如:320,88px的元素应该是44px,要是直接计算元素的尺寸,那引入rem无任何意义了,直接用媒体查询,将html字体尺寸设置为312.5%即可,元素的尺寸只用写一套。一套设计稿,适配n多尺寸的设备,要多爽有多爽。计算方法:320/640*625%=312.5%,其他尺寸的直接将320换为对应的尺寸即可。

推荐学习:《css视频教程》

以上就是css3中rem是什么意思的详细内容,

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/698166.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-22
下一篇 2022-04-22

发表评论

登录后才能评论

评论列表(0条)

保存