首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >基于容器宽度的字体缩放

基于容器宽度的字体缩放
EN

Stack Overflow用户
提问于 2013-04-17 17:37:19
回答 31查看 1.6M关注 0票数 1.5K

我很难理解字体缩放的问题。

我目前有一个网站的身体font-size为100%。但是100%的什么?这似乎计算出了16个像素。

我的印象是,100%指的是浏览器窗口的大小,但显然不是,因为无论窗口是缩小到移动宽度还是全屏桌面,它都是16像素。

如何使站点上的文本相对于其容器缩放?我试过使用em,但它也不能扩展。

我的推理是,当你调整大小时,像我的菜单这样的东西会被挤压,所以我需要减少.menuItempx font-size以及与容器宽度相关的其他元素。(例如,在大型桌面的菜单中,22px可以完美地工作。向下移动到tablet width,16px更合适。)

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

EN

回答 31

Stack Overflow用户

发布于 2015-06-19 00:47:30

SVG解决方案:

代码语言:javascript
复制
.resizeme {
  resize: both;
  margin: 0;
  padding: 0;
  height: 75px;
  width: 500px;
  background-color: lightblue;
  overflow: hidden;
}
代码语言:javascript
复制
<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和文本换行的解决方案

代码语言:javascript
复制
.resizeme {
  resize: both;
  margin: 0;
  padding: 0;
  height: 200px;
  width: 500px;
  background-color: lightblue;
  overflow: hidden;
}
代码语言:javascript
复制
<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>

票数 108
EN

Stack Overflow用户

发布于 2016-03-11 16:30:30

在我的一个项目中,我使用vw和vh的“混合”来根据我的需要调整字体大小,例如:

代码语言:javascript
复制
font-size: calc(3vw + 3vh);

我知道这不能回答操作员的问题,但也许它可以为其他任何人提供解决方案。

票数 48
EN

Stack Overflow用户

发布于 2013-11-11 18:01:46

这个问题有一个很大的哲学。

最简单的做法是为body指定一定的字体大小(我推荐10个),然后所有其他元素都将在emrem中使用它们的字体。我将给你一个例子来理解这些单元。Em总是相对于它的父级:

代码语言:javascript
复制
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:

代码语言:javascript
复制
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

票数 28
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16056591

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档