我很难理解字体缩放。

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

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

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

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

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


当前回答

此web组件更改字体大小,使内部文本宽度与容器宽度匹配。查看演示。

您可以这样使用:

<full-width-text>Lorem Ipsum</full-width-text>

其他回答

但如果容器不是视口(主体)呢?

真正的答案是transform属性允许您通过倾斜、旋转、平移或缩放来直观地操纵元素:

https://css-tricks.com/almanac/properties/t/transform/

这对我有用:

我尝试根据设置“字体大小: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元素或小于其父元素的元素,否则如果子元素和父元素都具有相同的宽度/高度,则函数将失败。

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://simplefocus.com/flowtype/.这是我在我的网站上使用的,而且效果很好。

使用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公司