本文操作环境: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是什么意思的详细内容,更多请关注风君子博客其它相关文章!