关于字体大小继承问题。

关于字体大小继承问题。

body{

font-size: 100px;

}

#box{

width: 100rem;

margin: 0 auto;

display: flex;

flex-wrap: wrap;

justify-content: flex-start;

}

.items {

width: 25rem;

}

.items img{

width: 100%;

}

请问老师,为什么 box 里面的 100rem 换算出来 1600 而不是 1000 呢?

body 里面设置的字体大小没有生效,这是为什么呢?

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕码 2019-04-27 09:39:25

同学你很好!

不是的哦,这里的rem是相对于根元素(一般根元素是指HTML)的字体大小单位。

同学可以给html设置一个固定的字体大小,那么html的子级的字体大小设置就是相对于html的了

或者可以在js中写一个转换字体大小的js文件,前几节视频中老师有用到过这个js文件,同学可以下载源码查看:

http://img1.sycdn.imooc.com//climg/5cc3b1ab0001134e04600431.jpg

http://img1.sycdn.imooc.com//climg/5cc3b15e0001269d09600421.jpg

同学可以下载下来,参考理解一下~

如果帮助到了你 欢迎采纳 祝学习愉快~

好帮手慕码 2019-04-26 10:17:46

同学你好!

(1)body设置的字体大小设生效的:

http://img1.sycdn.imooc.com//climg/5cc269e300013fb004330134.jpg

(2)box 里面的 100rem 换算出来 1600的原因是:

rem是指相对于根元素(这里可以理解为HTMl标签)的字体大小的单位。浏览器默认的字体大小是16px,所以100rem * 16px = 1600px

如果帮助到了你 欢迎采纳 祝学习愉快~

  • 提问者 此处留白 #1
    那是要把所有的标签都设置固定的字体大小后面的REM才能方便使用吗?
    2019-04-27 00:07:22
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师