引导响应文本大小

我试图建立一个响应布局使用引导,目前正在定义一些标题的字体大小: 3em;

但是当布局被缩小时,这就太大了。如何响应地减小文本的大小?

493798 次浏览

我的解决方案有点像黑客技术,但是很有效,我正在使用它。

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

最简单的方法是在% 或 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的所有方式

您可以使用 viewport 单元(vh,vw...) ,但是它们是 不能在 Android 上工作 < 4.4