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

Posted 2023-03-06

【中文标题】Bootstrap响应式文本大小[重复]

【英文标题】：Bootstrap Responsive Text Size [duplicate]

【发布时间】：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/…

【参考方案1】：

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

少

@media (max-width: @screen-xs) 
    bodyfont-size: 10px;


@media (max-width: @screen-sm) 
    bodyfont-size: 14px;



h5
    font-size: 1.4rem;
       

一路看https://***.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 中的响应式断点弄乱了布局。对于非断点响应框架来说，这是一个很酷的想法。

视口单位即使受支持也永远不会起飞，因为我们通常需要以容器的百分比宽度和高度来指定字体大小，而不是视口。

您不应该将它用于字体大小。它禁止用户使用缩放来更改文本大小。