我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗?这似乎是在16个像素处计算出来的。
我的印象是,100%会以某种方式指代浏览器窗口的大小,但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面,都是16像素。
如何使站点上的文本与其容器相关?我尝试过使用它们,但这也无法扩展。
我的理由是,当你调整大小时,像我的菜单这样的东西会变得压扁,所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。(例如,在大型桌面上的菜单中,22px的效果非常好。向下移动到平板电脑宽度,16px更合适。)
我知道我可以添加断点,但我真的希望文本能够缩放并具有额外的断点,否则,我将以每100像素宽度减少数百个断点来控制文本。
如果容器不是主体,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中的熔融铅
使用vw,em&co.确实有效,但IMO始终需要人为的微调。
这是我刚刚根据@tnt-rox的回答编写的一个脚本,它试图使人类的触摸自动化:
$('#controller').click(function(){$('h2').each(函数){变量$el=$(此),max=$el.get(0),el=空;最大值=最大值? 最大偏移宽度: 320;$el.css({“font size”:“1em”,“display”:“inline”,});el=$el.get(0);el.get_float=函数(){变量fs=0;if(this.style&&this.style.fontSize){fs=parseFloat(this.style.fontSize.replace(/([\d\.]+)em/g,'$1'));}返回fs;};el.bigger=函数(){this.style.fontSize=(this.get_float()+0.1)+'em';};而(el.offsetWidth<max){el.bigger();}//完成触摸。$el.css({“字体大小”:((el.get_float()-0.1)+'em'),'线条高度':'正常','显示':'',});}); // 结束(每个)}); // 结束(字体缩放测试)第二部分{宽度:50%;背景色:番茄;字体系列:'Arial';}氢气{空白:nowrap;}h2:第n个孩子(2){字体样式:斜体;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js“></script><input type=“button”id=“controller”value=“Apply”/><div><h2>Lorem ipsum dolor公司</h2><h2>测试字符串</h2><h2>甜蜜串联</h2><h2>字体缩放比例</h2></div>
它基本上将字体大小减小到1em,然后开始递增0.1,直到达到最大宽度。
JSFiddle公司
这个问题有一个大的哲学。
最简单的方法是给body指定一个特定的字体大小(我建议10),然后所有其他元素的字体都是em或rem。我会给你一个例子来理解这些单位。Em始终相对于其父级:
body{font-size: 10px;}
.menu{font-size: 2em;} /* That means 2*10 pixels = 20 pixels */
.menu li{font-size: 1.5em;} /* That means 1.5*20 pixels = 30 pixels */
Rem始终相对于身体:
body{font-size: 10px;}
.menu{font-size: 2rem;} /* That means 2*10 pixels = 20 pixels */
.menu li{font-size: 1.5rem;} /* that means 1.5*10 pixels = 15 pixels */
然后,您可以创建一个脚本,该脚本将根据容器宽度修改字体大小。但这不是我要推荐的。例如,在一个900像素宽的容器中,你会有一个字体大小为12像素的p元素。根据你的想法,它将变成一个300像素宽的容器,字体大小为4像素。必须有一个下限。
其他解决方案是媒体查询,这样您就可以为不同的宽度设置字体。
但我推荐的解决方案是使用一个JavaScript库来帮助您实现这一点。还有到目前为止我找到的fitext.js。
这对我有用:
我尝试根据设置“字体大小:10px”得到的宽度/高度来近似字体大小。基本上,这个想法是“如果我有20像素宽和11像素高的‘字体大小:10px’,那么计算50像素宽和30像素高的容器的最大字体大小是多少?”
答案是双重比例制:
{20:10=50:X,11:10=30:Y}={X=(10*50)/20,Y=(10*30)/11}
现在X是与宽度匹配的字体大小,Y是与高度匹配的字体尺寸;取最小值
function getMaxFontSizeApprox(el){
var fontSize = 10;
var p = el.parentNode;
var parent_h = p.offsetHeight ? p.offsetHeight : p.style.pixelHeight;
if(!parent_h)
parent_h = 0;
var parent_w = p.offsetHeight ? p.offsetWidth : p.style.pixelWidth;
if(!parent_w)
parent_w = 0;
el.style.fontSize = fontSize + "px";
var el_h = el.offsetHeight ? el.offsetHeight : el.style.pixelHeight;
if(!el_h)
el_h = 0;
var el_w = el.offsetHeight ? el.offsetWidth : el.style.pixelWidth;
if(!el_w)
el_w = 0;
// 0.5 is the error on the measure that JavaScript does
// if the real measure had been 12.49 px => JavaScript would have said 12px
// so we think about the worst case when could have, we add 0.5 to
// compensate the round error
var fs1 = (fontSize*(parent_w + 0.5))/(el_w + 0.5);
var fs2 = (fontSize*(parent_h) + 0.5)/(el_h + 0.5);
fontSize = Math.floor(Math.min(fs1,fs2));
el.style.fontSize = fontSize + "px";
return fontSize;
}
注意:函数的参数必须是span元素或小于其父元素的元素,否则如果子元素和父元素都具有相同的宽度/高度,则函数将失败。
带有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表示视口的全宽,在滚动条下延伸(内容无法扩展。