javascript - 将html, body的font-size设置为100%有什么用?

Question

在很多库都会看到有人写这样的代码:

html,
body {
  font-size: 100%; }

请问这样写有什么用呢? font-size为什么要用100%?
font-size用百分数, 是相对于父元素的font-size计算. 那么html的父元素又是多少呢?
另外, 为什么不用font-size: 1em;
它们之间有什么区别?

Answer 1

html的父元素没有指定的话会有一个默认值,em与百分数形式没区别,各自喜好

Answer 2

如果你要做移动端的处理，或许下面才是你想要的。

html<meta name="viewport" content="width=device-width, initial-scale=1" />

Answer 3

默认的原大小而已，何必纠结这种问题，用%比较适合自适应布局

Answer 4

1.首先说一下你写的这段代码，这段代码是有效的，代表整个页面默认字体大小为16*2,16px字体大小是初始化时网页默认的大小，你的是200%，当然也是按照2倍计算的。

2.你说的html的父元素，这个可能有点问题，你想知道的应该是根元素document.documentElement的字体大小是多少对吧，我不说是多说，你自己运行一下就会一目了然window.getComputedStyle(document.documentElement,null)['fontSize']

3.字体的规定可以用百分数，px，em，rem或者其他的单位，看你想做什么样的页面了，固定尺寸的就用px就够了，但是如果要做响应式rem常用一些，兼容低版本自然会有相应的办法，如sass中的计算方式，或者通过js来改变根元素的大小。em相对于父元素来决定，而rem是根据html的字体大小来决定的。

最后，你可以多动手写一下，这样不但加深印象，也会认识的更深刻，多去一些css，前端网站看看，如大漠大大的w3cplus和sass中国，这是一篇文章，你可以看看http://www.cn-sass.com/%E6%8A%80%E5%B7%A7/sass-px-to-rem-with-mixin-and-function.html

Answer 5

假如你设置body{font-size:12px;}

但h1是不会继承这个12px，它会按照一定百分比增加字号，但如果给h1显试指定font-

size:100%;它就会继承body设定的字体大小。

1. 它改变了默认的大小。

2. 这些元素本身不会继承父体的字体大小，设置了font-size:100%后就能自动继承。