资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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%。找了个参考图,方便参考。如下:

css3中的rem怎么使用

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

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

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

效果图尺寸如下:

css3中的rem怎么使用

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

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

css3中的rem怎么使用

可爱的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://www.cdkjz.cn/article/pojsgi.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220