我很难理解字体缩放。

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

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

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

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

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


当前回答

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

您可以这样使用:

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

其他回答

如果容器不是主体,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中的熔融铅

我准备了一个简单的缩放函数,使用CSS转换而不是字体大小。您可以在任何容器中使用它,不必设置媒体查询等:)

博客文章:全宽CSS和JS可扩展标头

代码:

function scaleHeader() {
  var scalable = document.querySelectorAll('.scale--js');
  var margin = 10;
  for (var i = 0; i < scalable.length; i++) {
    var scalableContainer = scalable[i].parentNode;
    scalable[i].style.transform = 'scale(1)';
    var scalableContainerWidth = scalableContainer.offsetWidth - margin;
    var scalableWidth = scalable[i].offsetWidth;
    scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
    scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
  }
}

工作演示:https://codepen.io/maciejkorsan/pen/BWLryj

在艺术上,如果您需要在相同的宽度内放置两行或多行文本,而不管它们的字符数如何,那么您有很好的选择。

最好找到一个动态解决方案,这样无论输入什么文本,我们都会得到一个很好的显示。

让我们看看我们可以如何接近。

var els=document.querySelectorAll(“.divtext”),refWidth=els[0].clientWidth,refFontSize=parseFloat(window.getComputedStyle(els[0],null).getPropertyValue(“字号”);els.forEach((el,i)=>el.style.fontSize=refFontSize*refWidth/els[i].clientWidth+“px”)#集装箱{显示:内联块;背景色:黑色;衬垫:0.6vw 1.2vw;}.div文本{显示:表格;颜色:白色;字体系列:影响;字体大小:4.5vw;}<div id=“container”><div class=“divtext”>这只是一个</div><div class=“divtext”>示例</div><div class=“divtext”>向您展示</div><div class=“divtext”>您想要</div></div>

我们所做的只是获取第一行的宽度(els[0].clientWidth)和字体大小(parseFloat(window.getComputedStyle(els[0],null).getPropertyValue(“字体大小”))作为引用,然后计算后续行的字体大小。

你可能正在寻找这样的东西:

http://jsfiddle.net/sijav/dGsC9/4/ http://fiddle.jshell.net/sijav/dGsC9/4/show/

我使用过flowtype,它工作得很好(不过它是JavaScript而不是纯CSS解决方案):

$('body').flowtype({
    minFont: 10,
    maxFont: 40,
    minimum: 500,
    maximum: 1200,
    fontRatio: 70
});

如果问题是宽屏桌面上的字体太大,我认为最简单的CSS方法应该是这样的(假设包装器最大宽度为1000像素)

.specialText{
    font-size: 2.4vw;
}

@media only screen and (min-width: 1000px) {
    .specialText {
        width: 24px;
    }
}

因此,它可以自动调整大小,以适应任何小于容器最大宽度的屏幕,当屏幕更宽时(几乎所有台式机和笔记本电脑),它可以固定大小。