使用rem设置内部的字体大小:根元素有效。为什么?

Using rem to set font-size inside :root element works. Why?(使用rem设置内部的字体大小:根元素有效。为什么?)
本文介绍了使用rem设置内部的字体大小:根元素有效。为什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我最近遇到了这样一个事实:以下代码运行起来非常棒:

:root {
  font-size: .8rem;
}

(即它重新调整默认大小)。

我的问题是:为什么这样做有效?在:root中使用rem应该是非法的或定义不正确(因为rem被定义为相对于:root的字体大小本身-因此使用rem来定义:root的属性至少是奇怪的),这对吗?

谢谢!

附注:对于理解CSS背后的计算机制,这是一个"元问题"。我非常肯定,这样做的规范方法是在根元素上设置百分比大小(也称为。<html>)。

html

rem值相对于根元素的font-size属性,对于推荐答案文档,该属性是html元素。

根据CSS Values and Units Module Level 3关于rem值:

等于根元素上的Font-Size的计算值。什么时候 在根元素的Font-Size属性上指定,rem单位 引用属性的初始值

如果没有在根元素上设置显式值,它将从用户可以更改的浏览器设置中继承其值;通常,浏览器设置中的默认字体大小为16px或Medium。

因此,如果您在根元素上设置rem,则是相对于浏览器设置中的默认值进行设置

这篇关于使用rem设置内部的字体大小:根元素有效。为什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

layui表格:设置表头居中,内容居左的实例代码:表头在属性中控制,内容直接用css样式控制 { field: 'Result', title: '结果', align: 'center', width: '60%', templet: function (d) { return 'div style="text-align:left"' + d.Result + '/div' }},
p您的性别:/p div class="radio-sex" input type="radio" id="sex1" name="sex" label for="sex1"/label span男/span /div div class="radio-sex" input type="radio" id="sex2" name="sex" label for="sex2"/label 女 /divstyle.radio-sex { position: relative; display: inline-
h2Cars Select/h2div class="select"select name="cars"option value="volvo"Volvo/optionoption value="saab"Saab/optionoption value="opel" selectedOpel/optionoption value="audi"Audi/option/select/divstylebody {font-size: 20px;color: #090;background-color: #eee
p5.js WebGL 3d graphics covered by 2d background when rotated(P5.js旋转时被2D背景覆盖的WebGL 3D图形)
Static vector field with classic arrows at every point on p5.js(P5.js上每个点都有经典箭头的静态向量场)
Ball-Triangle Collision(球-三角形碰撞)