css3中的rem怎么使用
这篇文章主要介绍“css3中的rem怎么使用”,在日常操作中,相信很多人在css3中的rem怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css3中的rem怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
创新互联公司于2013年创立,先为黄冈等服务建站,黄冈等地企业,进行企业商务咨询服务。为黄冈企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
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换为对应的尺寸即可。
到此,关于“css3中的rem怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
本文题目:css3中的rem怎么使用
文章源于:http://scyanting.com/article/pojsgi.html