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

嗯。事情是这样的
我们可以使用元素的

width:100%

，它将占据其容器的整个宽度。在使用字体的情况下，我们如何做到这一点？ 我试过使用100%或em等，但不起作用

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

1-桌面

2-安卓

3-iPhone

您可以看到，文本“网上报价和购买”在桌面和Android（这是必需的）的同一行中，而在iPhone中有两行。而这三种字体的大小是相同的。这就是问题所在

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

请注意，我已经检查了，但它说它不会是动态的。因此，我们正在寻找更好的替代方案

---

您可以在其中找到表单。

您可能希望了解如何使用媒体查询在整个设备范围内实现这一点。下面是一张iPhone的图片，但您可能需要为所有设备调整一些图片

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

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

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

---

进一步阅读：

这在纯CSS中是不可能的。您有4种选择：

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

2） 使用视口百分比单位：

vw

，如本节所述

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

4） 应用适合容器的字体大小，可能在600px+之后调整；事实上，字体不能完全适合容器的100%

---

对于您的具体需求，我建议使用第4种方法-不依赖JS，这是最简单的应用方法，不会对您的需求造成太大的影响。如果文本也向左对齐，表单可能会看起来更好。我认为no1和2有点过头了。

试试：

-webkit文本大小调整：100%

FitText可以做到这一点@cspete，FitText是一个脚本解决方案。我们可以有一个纯css解决方案吗？你有我们可以查看的URL吗？@TonyBarnes，更新了我的问题并插入了链接。请检查。设备频谱不断变化-这不是一个未来的解决方案。还应该使用移动优先媒体查询（

minwidth

而不是

max width

）。在过去几年中，我发现使用max width和断点的时间更短，效果更好。但后来我为大约40个设备屏幕标准设置了过多的BP。从全宽开始，向下工作，直到我需要一些改变，这样我就不需要单独定义，当它在非常窄的区域上几乎是FW元素时。再说一次，我的2c价值。移动优先更好——而不是桌面到移动。这里有一些优点：相当主观的观点，我故意使用这两种方法，但由于我所做的大多数设计都是桌面缩小的，这对我来说很有效。Mobile first的性能更好。在桌面之后使用手机不是一个好的做法。谢谢你的评论。那么，如果我转向JS解决方案，用一个简单的代码怎么可能做到呢？我不想只为一个元素包含整个库。我现在指的是这个解决方案@Symbolwdd我同意引入整个库以达到您想要的效果。您发布的方法可能有效，但您还需要为窗口大小调整设置一个超时，这不是最好的；否则，如果调整窗口大小，文本将不会调整大小。就我个人而言，正因为如此，我认为我提到的其中一种方法会更好。