文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS -字体大小为包含div (元素)的100%

问CSS -字体大小为包含div (元素)的100%
EN

Stack Overflow用户

提问于 2015-02-07 11:58:51

回答 2查看 5.1K关注 0票数 2

好的。事情是这样的。

就像我们可以使用元素的width:100%一样，它将占用其容器的全部宽度。在字体的情况下，我们怎么做呢？我试过使用100%或其他，但这是行不通的。

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

1-桌面

2- Android

3- iPhone

您可以看到文本“”与Desktop和Android (这是必需的)位于同一行，而在iPhone中则是两行。而字体大小对所有三种都是一样的。这就是问题所在。

一种方法是，在iPhone的问题得到解决之前，我会缩小字体的大小，但是对于桌面和安卓系统来说，字体要小得多。如果我告诉字体根据其包含的div来调整其大小，那么问题就会得到解决。

请注意，我已经检查了解在这里，但它说它不会是动态的。所以找一个更好的替代方案。

这是链接，您可以在那里找到表单。

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-02-07 12:41:38

这是不可能的纯CSS。你有四个选择：

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

2)使用视图端口百分比单位：vw，如本所以回答所述

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

4)使用适合容器的字体大小，可能在600 of +之后对其进行调整；并接受字体不能完全符合容器100%的事实。

对于您的具体要求，我建议第4号--不会有JS依赖性，这是最简单的应用，对您的需求不会有太大影响。如果你把文字和左边对齐的话，这个表格可能会更好看。我认为no1和2有点过火了。

票数 2

Stack Overflow用户

发布于 2015-02-07 12:10:53

您可能想看看如何使用媒体查询在设备频谱中实现这一点。下面是一个用于iPhone概述的，但是您可能会有一些对齐所有的设备。

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

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

我个人会使用一个基于屏幕的固定图形，因为你知道它将精确地呈现在一个缩放方法之上。我的2c价值。

进一步阅读：http://css-tricks.com/css-media-queries/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28381848

复制

相似问题

问CSS -字体大小为包含div (元素)的100%
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS -字体大小为包含div (元素)的100%EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS -字体大小为包含div (元素)的100%
EN