Question

确定。这就是事情。
就像我们可以使用元素的width:100%一样，它将占据其容器的整个宽度。在字体的情况下我们怎么做呢？我曾尝试使用100％或em等，但这不起作用。

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

1-桌面

enter image description here

2- Android enter image description here

3- iPhone enter image description here

你可以看到文字“引用和购买在线”与桌面和Android（这是要求）在同一行，而它在iPhone中分为两行。而三种字体大小相同。现在，这就是问题所在。

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

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

Here is the link您可以在这里找到该表单。

Answer 1

纯CSS无法实现这一点。您有4个选项：

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

2）使用视口百分比单位：vw，如SO answer

中所述

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

4）应用适合容器的字体大小，可以在600px +之后进行调整;并且认为字体不适合 100％的容器。

我推荐4号用于您的特定要求 - 没有JS依赖性，它最简单的应用，它不会对您的要求产生太大的影响。如果您将文本对齐，也许表单看起来会更好。我认为no1和2有点矫枉过正。

Answer 2

您可能希望使用媒体查询来查看设备频谱中的内容。下面是一张适用于iPhone的肖像，但您可能需要为所有设备调整一些。

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

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

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