基于容器宽度的字体缩放
我很难理解字体缩放的问题。
我目前有一个网站的身体font-size为100%。但是100%的什么？这似乎计算出了16个像素。
我的印象是，100%指的是浏览器窗口的大小，但显然不是，因为无论窗口是缩小到移动宽度还是全屏桌面，它都是16像素。
如何使站点上的文本相对于其容器缩放？我试过使用em，但它也不能扩展。
我的推理是，当你调整大小时，像我的菜单这样的东西会被挤压，所以我需要减少.menuItem的px font-size以及与容器宽度相关的其他元素。(例如，在大型桌面的菜单中，22px可以完美地工作。向下移动到tablet width，16px更合适。)
我知道我可以添加断点，但我真的希望文本可以缩放并具有额外的断点，否则，为了控制文本，宽度每减少100个像素，我就会有数百个断点。
回答 31
Stack Overflow用户
发布于 2015-06-19 00:47:30
SVG解决方案：
.resizeme {
resize: both;
margin: 0;
padding: 0;
height: 75px;
width: 500px;
background-color: lightblue;
overflow: hidden;
}<div class="resizeme">
<svg
width="100%"
height="100%"
viewBox="0 0 500 75"
preserveAspectRatio="xMinYMid meet"
style="background-color:green"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<text
x="0"
y="75"
font-size="75"
fill="black"
>█Resize This█</text>
</svg>
</div>
用foreignObject实现SVG和文本换行的解决方案
.resizeme {
resize: both;
margin: 0;
padding: 0;
height: 200px;
width: 500px;
background-color: lightblue;
overflow: hidden;
}<div class="resizeme">
<svg
width="100%"
height="100%"
viewBox="0 0 500 200"
preserveAspectRatio="xMinYMin meet"
>
<foreignObject width="100%" height="100%" xmlns="http://www.w3.org/1999/xhtml">
<div xmlns="http://www.w3.org/1999/xhtml" style="background-color:lightgreen;">
<h1>heading</h1>
<p>Resize the blue box.</p>
</div>
</foreignObject>
</svg>
</div>
Stack Overflow用户
发布于 2016-03-11 16:30:30
在我的一个项目中，我使用vw和vh的“混合”来根据我的需要调整字体大小，例如：
font-size: calc(3vw + 3vh);我知道这不能回答操作员的问题，但也许它可以为其他任何人提供解决方案。
Stack Overflow用户
发布于 2013-11-11 18:01:46
这个问题有一个很大的哲学。
最简单的做法是为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：
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库来帮助您完成此任务。还有我到目前为止找到的fittext.js。
https://stackoverflow.com/questions/16056591
复制相似问题
腾讯云开发者
