Bootstrap响应式文本大小[重复]答案

【问题标题】：Bootstrap Responsive Text Size [duplicate]Bootstrap响应式文本大小[重复]
【发布时间】：2013-01-10 08:23:44
【问题描述】：

我正在尝试使用引导程序构建响应式布局，目前正在使用 font-size:3em 定义一些标题；

但是当布局缩小时，这太大了。如何响应地减小文本的大小？

【问题讨论】：

您是否尝试过使用百分比作为字体大小？
这不是指定答案的副本。这个问题是特定于 Bootstrap 的，下面的答案也是如此。有一个微妙但重要的区别。 Bootstrap 在 LESS 中定义了要在媒体查询中使用的变量。我会敦促 @kapa 删除不准确的重复名称。
@DaveJensen 我不同意。该解决方案不依赖于 Bootstrap。两个问题下的答案也几乎完全相同。屏幕尺寸是来自 LESS/SASS 变量，还是简单地硬编码，都没有区别。
Bootstrap 3.3.5 仅更改字体大小以响应轮播字形图标的媒体查询-因此您不能使用 bootstrap 执行此操作-您需要按照其他答案中的描述创建自己的媒体查询（对此和其他问题）。
Bootstrap 4 文档专门解决了这个 Bootstrap 问题：getbootstrap.com/docs/4.0/content/typography/…

标签： css twitter-bootstrap responsive-design

【解决方案1】：

最简单的方法是使用 % 或 em 中的尺寸。只需更改基本字体大小，一切都会改变。

少

@media (max-width: @screen-xs) {
    body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}


h5{
    font-size: 1.4rem;
}

一路看https://stackoverflow.com/a/21981859/406659

您可以使用视口单位 (vh,vw...)，但它们不适用于 Android

【讨论】：

我试过了，但是当我输入@screen-sm时，Adobe Dreamweaver 就崩溃了
不知道为什么。 Dreamweaver 支持的少吗
这使得正文字体相当不可读。它应该只用于标题。
不，你需要使用适当的字体大小而不是 10px ;)
错了。你不能混淆单位。你得到这个Incompatible units: 'px' and 'em'.

【解决方案2】：

嗯，我的解决方案有点骇人听闻，但它有效，我正在使用它。

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

【讨论】：

更好地使用媒体查询，直到大多数移动设备都支持视口单元，参见例如quirksmode.org/mobile/tableViewport.html
已经很好支持了caniuse.com/#feat=viewport-units
它得到了很好的支持，但是 Bootstrap 中的响应式断点弄乱了布局。对于非断点响应框架来说，这是一个很酷的想法。
视口单位即使受支持也永远不会起飞，因为我们通常需要以容器的百分比宽度和高度来指定字体大小，而不是视口。
您不应该将它用于字体大小。它禁止用户使用缩放来更改文本大小。