我很难理解字体缩放。

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

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

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

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

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


当前回答

尝试http://simplefocus.com/flowtype/.这是我在我的网站上使用的,而且效果很好。

其他回答

100%是相对于基本字体大小的,如果您没有设置它,它将是浏览器的用户代理默认值。

为了获得您想要的效果,我将使用一段JavaScript代码来相对于窗口尺寸调整基本字体大小。

我看不到任何关于CSS flex属性的答案,但它也非常有用。

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

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

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

始终使元素具有此属性:

JavaScript:element.style.fontSize=“100%”;

or

CSS:style=“font-size:100%;”

当您进入全屏时,您应该已经计算了一个比例变量(比例>1或比例=1)。然后,在全屏幕上:

document.body.style.fontSize = (scale * 100) + "%";

它只需要很少的代码就可以很好地工作。

如果要将其放入特定容器(如div)中,请使用:

width: max-content;

调整字体大小也有很大帮助,例如字体大小:75%。