CSS - 包含 div（元素）的字体大小 100%答案

【问题标题】：CSS - font size 100% of the containing div (element)CSS - 包含 div（元素）的字体大小 100%
【发布时间】：2015-04-07 13:03:53
【问题描述】：

好的。事情就是这样。
就像我们可以使用元素的width:100% 一样，它将占据其容器的整个宽度。如果是字体，我们怎么能做到这一点？我曾尝试使用 100% 或 em 等，但这不起作用。

让我解释一下实际问题。这是 div 的三个版本。请看图片。

1- 桌面

2- 安卓

3- iPhone

您可以看到文本“在线报价和购买”在台式机和 Android 中位于同一行（这是必需的），而在 iPhone 中为两行。而这三个的字体大小是相同的。现在，这就是问题所在。

一种方法是我减小字体的大小，直到 iPhone 的问题得到解决，但对于桌面和 Android，它会小得多。如果不知何故，我告诉字体根据其包含的 div 调整其大小，那么问题将得到解决。

请注意，我已经检查了solution here，但它说它不是动态的。所以寻找更好的选择。

Here is the link 可以在哪里找到表格。

【问题讨论】：

标签： html css

【解决方案1】：

这对于纯 CSS 是不可能的。您有 4 个选项：

1) 为某些断点定义字体大小，以尽可能多地填充容器，跨浏览器/平台。

2) 使用视口百分比单位：vw，如SO answer 中所述

3）使用JS库填充父容器的文本，例如：

4) 应用适合容器的字体大小，可能在 600px + 之后调整它；并接受字体不能完全 100% 适应容器的事实。

根据您的具体要求，我推荐第 4 项 - 不会有 JS 依赖，应用起来最简单，而且不会对您的要求产生太大影响。如果将文本也向左对齐，表单可能会更好看。我觉得 no1 和 2 有点矫枉过正。

【讨论】：

感谢您的评论。那么，如果我转向 JS 解决方案，那么简单的代码怎么可能呢？我不想只为单个元素包含整个库。我目前指的是这个解决方案。 stackoverflow.com/questions/10292001/…
@Symbolwdd 我同意引入一个完整的库来达到你想要的效果。您发布的方法可能有效，但您还需要为窗口调整大小设置超时，这不是最好的；否则，如果调整窗口大小，文本将不会调整大小。就个人而言，正因为如此，我认为我提到的一种方法会更好。

【解决方案2】：

您可能希望考虑使用媒体查询在整个设备范围内实现这一目标。下面是 iPhone 肖像之一，但您可能需要为所有设备对齐一些。

@media screen and (max-width: 320px) {
.selector { font-size: 10px; }
}

.selector = 您的类或按钮的 id 或任何其他 html 选择器或标记。

我个人会使用基于屏幕的固定图形，因为您知道它将完全通过缩放方法进行渲染。我的 2c 价值。

【讨论】：

设备频谱不断变化 - 这不是面向未来的解决方案。还应该使用移动优先媒体查询（min-width 而不是max-width）。
在过去的几年中，我发现在断点上使用 max-width 的时间更短，效果更好。但后来我为大约 40 种设备屏幕标准设置了过多的 BP。并从全宽开始并向下工作，直到我需要以这种方式进行更改，我不必单独定义它何时会在极窄的几乎 FW 元素上进行。又是我的 2c 价值。
移动优先更好 - 而不是桌面到移动。这里有一些好处：developers.google.com/web/fundamentals/getting-started/…
相当主观的意见，我故意使用两者，但由于我做的大部分开发设计都是桌面缩小，这对我有用。
移动优先对于性能来说更好。 “在桌面之后”做移动不是一个好习惯。