css - Bootstrap 响应式文本大小

Question

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

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

Answer 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 < 4.4

Answer 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;
}