关键词：
【中文标题】如何在 rem 中实现响应式字体大小 - bootstrap【英文标题】：How to implement responsive font size in rem - bootstrap 【发布时间】：2016-03-20 23:40:45 【问题描述】：我在我的项目中使用 bootstrap 3，我看到 bootstrap 中有 2 个 font-size 声明，如下所示：
Scaffolding.less
html font-size:10px;
body font-size : @font-base-size;
而@font-base-size 在 variables.less 中定义为 14px
我一直在阅读一些内容，其中一种具有响应式字体大小的方法是将基本字体大小作为在 body 或 html 中定义的 px，然后将 rem 中的字体大小用于 body 中的不同组件，例如p、h1等
但我不确定，我在哪里定义基本字体，应该在 html OR body 中？
为什么bootstrap的html和body字体大小不同？
我的观察： 当我在 html 中以 px 定义某些字体大小时，只有 rem 东西适用于所有内容，将字体大小定义为 body 中的 px 不适用于 rem。
【问题讨论】：
我对这个论点的最大质疑是，在响应断点处调整字体大小和间距时，您可以在 html 元素上设置新的字体大小，并且您在 rem 中设置的每个测量值都会自动调整，而使用 px，您需要为要调整的每个测量值编写新规则。当然，即使使用 rem 也可能需要更多的调整，但是通过巧妙的计划，您可以获得大量的免费比例缩放。将某些框间距测量值与类型、更轻的代码和更少的复杂性/更高的可维护性联系起来，对我来说显然是对 rem 的胜利。 @Jinu - 我也在做同样的事情。对不起，如果有任何混淆。我的意图是在 html 或 body 上使用像素字体大小（不管怎样），并使用 rem 单位定义其余部分。我的疑问是，为什么在正文中定义基本字体大小（以像素为单位）不起作用，而在 html 中定义确实有效。为什么 bootstrap 在 html 和 body 中有不同的字体大小？ 【参考方案1】：rem 单元相对于根或html 元素。
因此，应该在 html 元素上定义基本字体大小。
在body 上定义font-size 将起作用，但所有使用rem 单元定义font-size 的子元素将退回到根/html 元素以计算其绝对大小。
所以：
html
font-size: 10px;
body
font-size: 15px;
.parent
/* font-size will be 15px here */
.parent .child
font-size: 1.2rem; /* resolved to 12px */
至于为什么 Bootstrap 使用 2 种字体大小：html 元素上的 10px 字体大小只是他们使用的一些全局重置的一部分。此外，一些边距/填充是使用基本字体大小计算的，因此最好不要过多干扰。
【讨论】：
谢谢，这就是我要找的信息。所以这意味着，我可以安全地在 html 上设置字体大小，然后在整个过程中使用 rem，当用于其他大小的屏幕时，我会在媒体查询中更改 html 字体大小。【参考方案2】：如果你没有在页面的任何地方设置字体大小，那么它是浏览器默认的，可能是16px.所以，默认1rem = 16px和2rem = 32px。如果你在body元素上设置了20px的字体大小，那么1rem = 20px和2rem = 40px.
此外，em、rem 不是绝对单位——它是相对于当前选择的字体大小的单位。除非您通过使用绝对单位（例如px 或pt）设置字体大小来覆盖字体样式，否则这将受到用户浏览器或操作系统中字体选择的影响（如果他们已经制作了字体），所以它使用 em 作为一般长度单位是没有意义的，除非您特别希望它随着字体大小的缩放而缩放。
注意：评论太长了。对不起
【讨论】：
"如果你在 body 元素上设置了 20px 的字体大小，那么 1rem = 20px 和 2rem = 40px。"你确定吗，因为我认为 rem 不会以 body 元素字体大小为基础，它会以 html 中的字体大小为基础。而且，em 是相对于该元素上定义的字体大小，而 rem 是相对于 root。 抱歉弄错了。与他们混淆。是的。你说的对。 rem 取决于 html(root)。vue-cli3.x中实现页面等比缩放(postcss-px2rem)
...体是否也可变呢？想要实时响应字体大小和元素大小又该如何解决呢?这里我们可以使用一个插件，可以很轻松的解决掉这个实时响应等比缩放的问题：px2rem插件。安装配置需要结合rem.js配置到这里配置完成啦，看下效果配置前... 查看详情
如何在hexo中实现自适应响应式相册功能
用最清晰简洁的方法整合一个响应式相册效果技术选型由于我选用的主题使用了fancyBox作为图片弹出展示的框架，查看后表示很不错，能满足需要http://fancyapps.com/fancybox/3/图片加载可能会太慢，所以还需要一个图片延迟加载插件La... 查看详情
rem--来做响应式开发
...素指的是<html></html>rem作为度量单位，无疑是写响应式布局的最好单位，但是不兼容IE6~8，不过IE6~8我们可以用px来设置啊，哈哈ofcurse，rem不仅仅可以设置字体的大小，还可以设置宽高，外边距内边距等等，其实px能用的... 查看详情
如何设计响应式布局
1、在meta标签中添加viewport <metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=no"/>2、 不使用绝对宽度（px），使用相对宽度（%）3、 不使用绝对文字大小（px），使用相对文字大小（em,rem） em相对于父... 查看详情
如何在 Bulma CSS 中为响应式设计设置基本字体大小
】如何在BulmaCSS中为响应式设计设置基本字体大小【英文标题】：HowtosetbasefontsizesinBulmaCSSforresponsivedesign【发布时间】：2019-03-0710:15:23【问题描述】：通过Bulma.iodocumentation，我找不到如何为响应式设计设置基本字体大小。根据thiss... 查看详情
如何在 Bootstrap 4 中增加字体大小？
】如何在Bootstrap4中增加字体大小？【英文标题】：Howtoincreasefont-sizeinBootstrap4?【发布时间】：2018-02-1011:17:30【问题描述】：在Bootstrap4中，字体大小默认为使用em或rem作为字体。如何为所有视口大小增加font-size？因为每个元素看起... 查看详情
一行代码搞定font-size响应式(代码片段)
...码都很长，个人参考了资料后实现了一个一行代码font-size响应式。TL;DRhtmlfont-size:clamp(12px,calc(7px+0.390625vw),24px);解释在<html>标签中定义是为了定义全局字体基准大小，目前开发几乎所有的字体都用rem作为单位，而rem单位代表的... 查看详情
px单位html5响应式方案
移动端h5响应式方案最近这几年用得最多的最多的就是rem方案了。这个需要计算根元素的font-size来实现响应式。但这种方案也有一个缺点，那就是font-size不为整数的时候一些字体使用rem单位会导致字体显示的大小有问题，对视觉... 查看详情
React Native 响应式字体大小
...【发布时间】：2016-02-1106:04:21【问题描述】：我想问一下如何响应原生句柄或响应式字体。例如在iphone4s我有fontSize:14，而在iphone6我有fontSize:18.【问题讨论】：如果有人正在寻找完全禁用字体缩放的方法，请使用Text.defaultProps.allo... 查看详情
如何在没有 iphone 的情况下测试响应式设计字体
】如何在没有iphone的情况下测试响应式设计字体【英文标题】：HowdoItestresponsivedesignfontwithoutactuallyhavingiphone【发布时间】：2013-01-2213:38:44【问题描述】：我实现了响应式设计的概念，但现在我们面临一个问题。内容似乎很适合框... 查看详情
关于rem的计算顺序
/*响应式字体*//* *字体响应式 *屏幕>640px时，html字体大小 * 屏幕<640px时，html字体根据屏幕做出相应 **/(function(doc,win){ vardocEl=doc.documentElement, &nbs 查看详情
用rem来做响应式开发(转)
由于最近在做公司移动项目的重构，因为要实现响应式的开发，所以大量使用到了rem的单位，觉得这个单位有点意思。但是现在貌似用他的人很少。上一篇文章我分享了淘宝写的一篇rem的介绍，介绍的非常全面，但是他... 查看详情
自适应和响应式布局的区别，em与rem
...图片，等位置排版都是一样的，只是大小不同。 响应式布局：通过媒体查询监听屏幕大小的变化，做出响应式的改变，在不同设备可能展现不同的样式效果。 em:是相对其父元素的。 rem:相对于页面根元... 查看详情
如何在 Spring Boot 中实现刷新令牌
】如何在SpringBoot中实现刷新令牌【英文标题】：HowtoimplementrefreshtokeninSpringBoot【发布时间】：2018-09-2709:08:06【问题描述】：我已按照本指南https://auth0.com/blog/implementing-jwt-authentication-on-spring-boot/在我的Web应用程序中实现访问令牌... 查看详情
javascript控制rem字体大小
摘要：在写响应式H5页面的时候，我常常会用rem字体，为了兼容多个分辨率的设备，需要写多个@media标签，太麻烦并且不够精致，尤其是移动端的页面往往打不到我想要的效果，后来就用js替代了css的@media，下面是代码。（以下... 查看详情
如何在 Spring Boot 中实现 Camunda SendTask
】如何在SpringBoot中实现CamundaSendTask【英文标题】：HowtoimplementCamundaSendTaskinSpringBoot【发布时间】：2020-10-0914:06:21【问题描述】：我是Camunda的新手，正在使用以下任务：业务规则任务-->（网关）-->发送任务-->用户任务在使... 查看详情
带有tailwindcss的字体很棒的响应式大小
...描述】：我想让字体大小响应，但它不适用于font-awesome。如何使xl:fa-3x在tailwindcss上工作？<iclass="fasfa-pencil-altfa-lgxl:fa-3x"></i>谢谢【 查看详情
用户体验与响应式字体二三事｜rem单位与flexible.jsrpx单位与css媒体查询(代码片段)
响应式页面已经趋近成熟。在视觉和前端眼中，需要着重考虑的只有一点：当可视区域变化时，是在一行中展示更多/更少的内容？还是让字体随之变化而保证在不同屏幕中展示内容不变（除非一些极端情况... 查看详情