我很难理解字体缩放。

我目前有一个字体大小为100%的网站。但这是100%的吗?这似乎是在16个像素处计算出来的。

我的印象是,100%会以某种方式指代浏览器窗口的大小,但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面,都是16像素。

如何使站点上的文本与其容器相关?我尝试过使用它们,但这也无法扩展。

我的理由是,当你调整大小时,像我的菜单这样的东西会变得压扁,所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。(例如,在大型桌面上的菜单中,22px的效果非常好。向下移动到平板电脑宽度,16px更合适。)

我知道我可以添加断点,但我真的希望文本能够缩放并具有额外的断点,否则,我将以每100像素宽度减少数百个断点来控制文本。


当前回答

带有calc()、CSS单位和数学的纯CSS解决方案

这并不是OP所要求的,但可能会让某人过得很愉快。这个答案并不容易,需要在开发者端进行一些研究。

我终于得到了一个纯CSS解决方案,它使用了不同单位的calc()。您需要对公式有一些基本的数学理解,才能计算出calc()的表达式。

当我完成这项工作时,我必须得到一个全页面宽度的响应标头,在DOM中填充一些父级。我将在这里使用我的值,用你自己的值替换它们。

数学

您需要:

在某些视口中,比例调整得很好。我使用了320个像素,因此我得到了24个像素高和224个像素宽,因此比率为9.333…或28/3容器宽度,我有填充物:3em和全宽,因此达到100wv-2*3em

X是容器的宽度,因此请用自己的表达式替换它,或调整值以获得整页文本。R是你的比率。您可以通过调整某些视口中的值、检查元素宽度和高度并将其替换为自己的值来获得它。此外,它是宽度/高度;)

x = 100vw - 2 * 3em = 100vw - 6em
r = 224px/24px = 9.333... = 28 / 3

y = x / r
  = (100vw - 6em) / (28 / 3)
  = (100vw - 6em) * 3 / 28
  = (300vw - 18em) / 28
  = (75vw - 4.5rem) / 7

砰!成功了!我写了

font-size: calc((75vw - 4.5rem) / 7)

到我的标题,它在每个视口中都调整得很好。

但它是如何工作的?

我们需要一些常量。100vw表示视口的全宽,我的目标是建立带有一些填充的全宽标头。

比率。在一个视口中获得一个宽度和高度,我就得到了一个可以使用的比例,而通过这个比例,我知道在其他视口宽度中的高度应该是多少。用手计算它们需要大量的时间,至少需要大量的带宽,所以这不是一个好答案。

结论

我想知道为什么没有人知道这一点,有些人甚至告诉我,这是不可能修补CSS的。我不喜欢在调整元素时使用JavaScript,所以我不接受JavaScript(并忘记jQuery)的答案而不进行更多挖掘。总而言之,这很好,这是在网站设计中实现纯CSS的一步。

我很抱歉,我的文本中有任何不寻常的惯例,我不是英语母语,而且我对编写Stack Overflow答案也很陌生。

还应该注意的是,我们在一些浏览器中有邪恶的滚动条。例如,当使用Firefox时,我注意到100vw表示视口的全宽,在滚动条下延伸(内容无法扩展。

其他回答

有一种不使用JavaScript的方法可以做到这一点!

您可以使用内联SVG图像。如果SVG是内联的,则可以在SVG上使用CSS。您必须记住,使用此方法意味着您的SVG图像将响应其容器大小。

尝试使用以下解决方案。。。

HTML

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
      <text>SAVE $500</text>
  </svg>
</div>

CSS

div {
  width: 50%; /* Set your container width */
  height: 50%; /* Set your container height */

}

svg {
  width: 100%;
  height: auto;

}

text {
  transform: translate(40px, 202px);
  font-size: 62px;
  fill: #000;
}

例子:https://jsfiddle.net/k8L4xLLa/32/

想要更华丽的东西吗?

SVG图像还允许您对形状和垃圾进行处理。看看这个可扩展文本的好用例。。。

https://jsfiddle.net/k8L4xLLa/14/

带有calc()、CSS单位和数学的纯CSS解决方案

这并不是OP所要求的,但可能会让某人过得很愉快。这个答案并不容易,需要在开发者端进行一些研究。

我终于得到了一个纯CSS解决方案,它使用了不同单位的calc()。您需要对公式有一些基本的数学理解,才能计算出calc()的表达式。

当我完成这项工作时,我必须得到一个全页面宽度的响应标头,在DOM中填充一些父级。我将在这里使用我的值,用你自己的值替换它们。

数学

您需要:

在某些视口中,比例调整得很好。我使用了320个像素,因此我得到了24个像素高和224个像素宽,因此比率为9.333…或28/3容器宽度,我有填充物:3em和全宽,因此达到100wv-2*3em

X是容器的宽度,因此请用自己的表达式替换它,或调整值以获得整页文本。R是你的比率。您可以通过调整某些视口中的值、检查元素宽度和高度并将其替换为自己的值来获得它。此外,它是宽度/高度;)

x = 100vw - 2 * 3em = 100vw - 6em
r = 224px/24px = 9.333... = 28 / 3

y = x / r
  = (100vw - 6em) / (28 / 3)
  = (100vw - 6em) * 3 / 28
  = (300vw - 18em) / 28
  = (75vw - 4.5rem) / 7

砰!成功了!我写了

font-size: calc((75vw - 4.5rem) / 7)

到我的标题,它在每个视口中都调整得很好。

但它是如何工作的?

我们需要一些常量。100vw表示视口的全宽,我的目标是建立带有一些填充的全宽标头。

比率。在一个视口中获得一个宽度和高度,我就得到了一个可以使用的比例,而通过这个比例,我知道在其他视口宽度中的高度应该是多少。用手计算它们需要大量的时间,至少需要大量的带宽,所以这不是一个好答案。

结论

我想知道为什么没有人知道这一点,有些人甚至告诉我,这是不可能修补CSS的。我不喜欢在调整元素时使用JavaScript,所以我不接受JavaScript(并忘记jQuery)的答案而不进行更多挖掘。总而言之,这很好,这是在网站设计中实现纯CSS的一步。

我很抱歉,我的文本中有任何不寻常的惯例,我不是英语母语,而且我对编写Stack Overflow答案也很陌生。

还应该注意的是,我们在一些浏览器中有邪恶的滚动条。例如,当使用Firefox时,我注意到100vw表示视口的全宽,在滚动条下延伸(内容无法扩展。

let textElement=document.getElementById('text1');let parentElement=textElement.parentElement;const parentClientHeight=parentElement.clientHeight;const parentClientWidth=parentElement.clientWidth;textElement.style.padding=“未设置”;textElement.style.margin=“自动”;let fontSize=parentClientHeight;设minFS=3,maxFS=fontSize;while(fontSize!=minFS){textElement.style.fontSize=`${fontSize}px`;如果(parentElement.scrollHeight<=parentClientHeight&&parentElement.scrollWidth<=parentClientWidth) {minFS=字体大小;}其他{maxFS=fontSize;}fontSize=数学楼层((minFS+maxFS)/2);}textElement.style.fontSize=`${minFS}像素';<div style=“高度:200px;宽度:300px;”><div id='text1'>测验</div></div>

对于动态文本,此插件非常有用:

http://freqdec.github.io/slabText/

只需添加CSS:

.slabtexted .slabtext
{
    display: -moz-inline-box;
    display: inline-block;
    white-space: nowrap;
}
.slabtextinactive .slabtext
{
    display: inline;
    white-space: normal;
    font-size: 1em !important;
    letter-spacing: inherit !important;
    word-spacing: inherit !important;
    *letter-spacing: normal !important;
    *word-spacing: normal !important;
}
.slabtextdone .slabtext
{
    display: block;
}

还有脚本:

$('#mydiv').slabText();

在CSS内部,尝试在底部添加此项,更改320像素的宽度,以适应设计开始中断的位置:

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

然后根据需要以“px”或“em”表示字体大小。