我很难理解字体缩放。
我目前有一个字体大小为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/
为了使字体大小适合其容器,而不是窗口,请参阅我在这个问题中分享的resizeFont()函数(其他答案的组合,其中大多数已经链接到这里)。它使用window.addEventListener('size',resizeFont);触发;。
Vanilla JavaScript:调整字体大小以适应容器
JavaScript:
function resizeFont() {
var elements = document.getElementsByClassName('resize');
console.log(elements);
if (elements.length < 0) {
return;
}
_len = elements.length;
for (_i = 0; _i < _len; _i++) {
var el = elements[_i];
el.style.fontSize = "100%";
for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
el.style.fontSize = size + '%';
}
}
}
您可能可以使用vw/vh作为备用,因此您可以使用JavaScript动态分配em或rem单位,确保在禁用JavaScript时字体可以缩放到窗口。
将.resize类应用于包含要缩放的文本的所有元素。
在添加窗口调整大小事件侦听器之前触发函数。然后,当加载页面以及调整页面大小时,任何不适合其容器的文本都将被缩小。
注意:默认字体大小必须设置为em、rem或%,以获得正确的结果。
如果容器不是主体,CSS技巧将覆盖“将文本适配到容器”中的所有选项。
如果容器是主体,则要查找的是视口百分比长度:
视口百分比长度与初始包含块的大小相关。当初始包含块的高度或宽度更改时,将相应地缩放它们。但是,当根元素上的溢出值为auto时,假设不存在任何滚动条。
值为:
vw(视口宽度的%)vh(视口高度的%)vi(根元素内联轴方向上视口大小的1%)vb(根元素块轴方向上视口大小的1%)vmin(vw或vh中较小的一个)vmax(较大或vw或vh)
1v*等于初始包含块的1%。
使用它看起来像这样:
p {
font-size: 4vw;
}
如您所见,当视口宽度增加时,字体大小也会增加,而无需使用媒体查询。
这些值是一个大小调整单位,就像px或em一样,因此它们也可以用于调整其他元素的大小,例如宽度、边距或填充。
浏览器支持非常好,但您可能需要一个后备方案,例如:
p {
font-size: 16px;
font-size: 4vw;
}
查看支持统计信息:http://caniuse.com/#feat=viewport-单位。
此外,请查看CSS技巧以获得更广泛的外观:视口大小的版式
这是一篇关于设置最小/最大尺寸并对尺寸进行更多控制的好文章:精确控制响应式印刷
下面是一篇关于使用calc()设置大小以使文本填充视口的文章:http://codepen.io/CrocoDillon/pen/fBJxu
此外,请查看这篇文章,它使用了一种称为“熔化引线”的技术来调整线条高度。CSS中的熔融铅
这可能不太实用,但如果您希望字体是父级的直接函数,而不需要任何JavaScript侦听/循环(interval)来读取div/页面的大小,那么有一种方法可以做到。Iframes。
iframe中的任何内容都会将iframe的大小视为视口的大小。因此,诀窍是创建一个iframe,其宽度是您希望文本达到的最大宽度,其高度等于特定文本的最大高度*纵横比。
抛开视口单位不能与文本的父单位一起出现的限制(如中所示,具有与其他所有单位相同的%大小),视口单位确实提供了一个非常强大的工具:能够获得最小/最大尺寸。你不能在其他地方这样做-你不能说。。。使这个div的高度等于父对象的宽度。
也就是说,诀窍是使用vmin,并设置iframe大小,当高度是限制维度时,[fract]*总高度是一个好的字体大小,而当宽度是限制维度的时候,[fract]*总宽度。这就是为什么高度必须是宽度和纵横比的乘积。
对于我的特定示例
.main iframe{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: calc(3.5 * 100%);
background: rgba(0, 0, 0, 0);
border-style: none;
transform: translate3d(-50%, -50%, 0);
}
这种方法的一个小烦恼是,您必须手动设置iframe的CSS。如果您附加整个CSS文件,这将占用许多文本区域的大量带宽。所以,我所做的是直接从CSS中附加我想要的规则。
var rule = document.styleSheets[1].rules[4];
var iDoc = document.querySelector('iframe').contentDocument;
iDoc.styleSheets[0].insertRule(rule.cssText);
您可以编写一个小函数来获取CSS规则/所有影响文本区域的CSS规则。
如果没有一些循环/聆听JavaScript,我想不出另一种方法。真正的解决方案是让浏览器提供一种根据父容器缩放文本的方式,并提供相同的vmin/vmax类型功能。
JSFiddle:https://jsfiddle.net/0jr7rrgm/3/(单击一次可将红色方块锁定在鼠标上,再次单击可释放)
大部分JavaScript都是我自定义的点击拖动功能。
容器查询是CSS功能集(2022年末)的最新添加,使这一点变得简单明了。
它们允许您基于包含元素的大小应用样式,但也提供了一组用于容器查询宽度/高度的新CSS单元cqw/cqh。要使用它们,需要在要使用其大小的父元素上设置容器类型属性。下面是一个最小的示例:
<div><p>Lorem ipsum dolor坐amet</p></div><style>第二部分{容器类型:内联大小;}p型{字体大小:5cqw;}</style>
随着父容器的增长,字体大小将平稳增加。在1000像素的容器宽度下,p字体大小将为1000像素/100*5=50像素。
容器类型可以是大小或内联大小。size跟踪容器的高度和宽度,允许您同时使用cqw和cqh。在网络上的大多数时间,高度是根据内容计算的,您只需指定宽度。为了节省浏览器的一些工作,您通常需要设置容器类型:inline-size;因此,浏览器只跟踪通常为宽度的内联维度(除非将写入模式设置为垂直)。
2022年下半年,浏览器对容器查询的支持快速增长,目前为75%(2023-01-01)。