CSS Bootstrap 响应文本大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14537611/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Responsive Text Size
提问by Somk
I am trying to build a responsive layout using bootstrap and currently am defining some of the titles with font-size:3em;
我正在尝试使用引导程序构建响应式布局，目前正在使用 font-size:3em 定义一些标题；
But when the layout is shrunk down this is too big. How can I responsively reduce the size of the text?
但是当布局缩小时，这太大了。如何响应性地减小文本的大小？
采纳答案by aWebDeveloper
Simplest way is to use dimensions in % or em. Just change the base font size everything will change.
最简单的方法是使用 % 或 em 中的尺寸。只需更改基本字体大小，一切都会改变。
Less
较少的
@media (max-width: @screen-xs) {
body{font-size: 10px;}
}
@media (max-width: @screen-sm) {
body{font-size: 14px;}
}
h5{
font-size: 1.4em;
}
Look at all the ways at https://stackoverflow.com/a/21981859/406659
在https://stackoverflow.com/a/21981859/406659查看所有方式
You could use viewport units (vh,vw...) but they dont work on Android < 4.4
您可以使用视口单位（vh、vw...），但它们不适用于 Android < 4.4
回答by Murtaza Khursheed Hussain
Well, my solution is sort of hack, but it works and I am using it.
好吧，我的解决方案有点像黑客，但它有效并且我正在使用它。
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;
}
