如何在rem - bootstrap中实现响应字体大小 [英] How to implement responsive font size in rem - bootstrap

问题描述

Scaffolding.less

在我的项目中使用bootstrap 3，我发现在bootstrap中有2个字体大小的声明， / strong>

  html {font-size：10px;} 
 
ody {font-size： @字体基大小; } 
  

而@ font-base-size在variables.less中定义为14px

我一直在阅读这样的东西，其中响应字体大小的一种方式是将基本字体大小定义为在body或html中定义的px，然后在 rem 对于不同的组件，如p，h1等。

但是我不确定，我在哪里定义基本字体，应该在html还是body？

为什么bootstrap在html和body中有不同的字体大小？

我的观察：
当我在px中定义了一些字体大小的HTML，那么只有rem的东西适用于所有的东西，定义字体的大小，因为体内的px不能用rem。

rem 单位是相对于根，或 html 元素。
因此，在 html 元素上应该定义基本字体大小。

定义一个 body 中的$ c> font-size 可以工作，但是所有具有 font-size <使用 rem 单元的code>定义会回退到root / html 元素来计算它们的绝对大小。



所以：



  html {
 font-size ：10px; 
} 
 
 body {
 font-size：15px; 
} 
 
 .parent {
 / * font-size在这里是15px * / 
} 
 
 .parent .child {
 font-size：1.2rem; / *解析为12px * / 
} 
  

至于Bootstrap为何使用2种字体大小： html 元素上的 10px font-size只是它们使用的全局重置的一部分。此外，一些利润/填充使用基本字体大小计算，所以最好不要干涉太多。

I am using bootstrap 3 in my project and I see that there are 2 declarations of font-size in bootstrap as below:

Scaffolding.less

html { font-size:10px;}

body{ font-size : @font-base-size; }

And the @font-base-size is defined as 14px in variables.less

I have been reading stuff where one way of having responsive font size was to have base font size as px defined in body or html as then use font sizes in rem for different components in body such as p, h1 etc.

But I am not sure, where do I define the base font, should it be in html OR body?

And why does bootstrap has different font size in html and body?

My observations: When I define some font size in px in html, then only rem thing works for everything, defining font size as px in body doesn't work with rem.

解决方案

The rem unit is relative to the root, or the html element. Thus defining the base font size should happen on the html element.

Defining a font-size on the body will work, but all child elements which have a font-size definition using rem units will fall back to the root/html element to calculate their absolute size.

So:

html {
  font-size: 10px;
}

body {
  font-size: 15px;
}

.parent {
  /* font-size will be 15px here */
}

.parent .child {
  font-size: 1.2rem; /* resolved to 12px */
}

As to why Bootstrap uses 2 font-sizes: the 10px font-size on the html element is just part of some global reset they use. Also, some margins/paddings are calculated using the base font size, so it's best not to interfere with that too much.

这篇关于如何在rem - bootstrap中实现响应字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！