使用 css/Bootstrap 的响应式字体大小答案

【问题标题】：Responsive font-size using css/Bootstrap使用 css/Bootstrap 的响应式字体大小
【发布时间】：2017-10-30 14:39:08
【问题描述】：

我创建了一个页面。它应该在桌面、移动设备和平板电脑上都能响应。

每当调整页面大小而不是字体时看起来都是响应式的。但在 mobile 中字体大小保持不变。它占据了很大的空间，也不是用户友好的。

如何让它响应？

我的示例 css：

body {
    font-size : 36px;
 }

我在这里使用px 我听说vw 会做出响应，但我不知道它是如何工作的。哪个是最好的字体属性？

或者是否有任何可用的引导样式？

【问题讨论】：

使用css media queries在不同的screen break-points定义不同的font-size到body。阅读更多here
我知道媒体查询，但有更好的响应式解决方案......我尝试了 size 属性vw 它可以工作但不完全......我的意思是字体大小应该基于屏幕尺寸。例如：如果它的网站，总宽度：100% 表示字体大小应该为 40%，就像在移动设备中一样，它应该......我需要更多关于vw 的说明

标签： html css twitter-bootstrap fonts

【解决方案1】：

我还没有使用过这个，但你应该能够使用百分比，给你的身体你的“基本字体大小”，然后从那里使用百分比。

html, body {
  font-size: 14px;
}

.some-element {
  font-size: 120%;
}

另一种选择是使用REM

【讨论】：

【解决方案2】：

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

1vw = 视口宽度的 1%

1vh = 视口高度的 1%

1vmin = 1vw 或 1vh，取较小者

1vmax = 1vw 或 1vh，取较大者

【讨论】：

【解决方案3】：

尝试使用媒体查询

@media screen and (max-width: 420px){
   body {
     font-size : 25px;
   }
}

@media screen and (max-width: 320px){
   body {
     font-size : 20px;
   }
}

【讨论】：

我知道媒体查询，但有更好的响应式解决方案......我尝试了 size 属性 vw 它可以工作但不完全......我的意思是字体大小应该根据屏幕大小进行缩放.例如：如果它的网站，总宽度：100% 表示字体大小应该为 40%，就像在移动设备中一样，它应该......

【解决方案4】：

使用不同的计量单位：

body {
  font-size : 2em;
}

【讨论】：

或者在每个视口上设置一个新的字体大小。
会根据屏幕分辨率自动缩放吗？字体大小应该在特定的比例，即使调整大小