基于容器宽度的字体缩放
我很难让字体缩放。
我目前有100％的font-size的本网站。 100％是什么？ 这似乎计算出16px。
我的印象是，100％会以某种方式引用浏览器窗口的大小，但显然不是因为窗口大小调整为移动宽度或完整的宽屏桌面总是16px。
我怎样才能使我的网站上的文字与其容器相关？ 我尝试过使用em但这并没有扩展。
我的推理是，当您调整大小时，像我的菜单这样的事情会变.menuItem ，所以我需要减少.menuItem的px font-size ，与容器的宽度有关。 （例如，在大型桌面上的菜单中，22px可以很好地工作，向下移动到平板宽度，16px更合适。）
我知道我可以添加断点，但是我真的希望文本能够像扩展断点那样扩展，否则最终会在宽度减少100px以控制文本时产生数百个断点。
您要查找的是视口百分比长度：
视口百分比长度是相对于初始包含块的大小。 当初始包含块的高度或宽度发生变化时，会相应地缩放。 但是，当根元素的溢出值为auto时，假定任何滚动条都不存在。
这些值是：
vw （视口宽度的百分比） vh （视口高度的百分比） vi （在根元素的内联轴方向上的视口大小的1％） vb （根元素的块轴方向上的视口大小的1％） vmin （ vw或vh的较小者） vmax （较大或vw或vh ） 1 v *等于初始包含块的1％。
使用它看起来像这样：
p {
font-size: 4vw;
}
正如您所看到的，当视口宽度增加时，字体大小也会增加，而不需要使用媒体查询。
这些值是一个大小调整单位，就像px或em ，因此它们也可用于调整其他元素的大小，例如宽度，边距或填充。
浏览器支持非常好，但您可能需要一个回退，例如：
p {
font-size: 16px;
font-size: 4vw;
}
查看支持统计信息：http：//caniuse.com/#feat=viewport-units。
另外，请查看CSS-Tricks以获得更广泛的外观：http://css-tricks.com/viewport-sized-typography/
这里有一篇关于设置最小/最大尺寸并对尺寸进行更多控制的好文章：http://madebymike.com.au/writing/precise-control-responsive-typography/
下面是一篇关于使用calc（）设置大小的文章，以便文本填充视口：http://codepen.io/CrocoDillon/pen/fBJxu
此外，请查看这篇文章，该文章使用了一种名为“熔化前导”的技术来调整线条高度。 https://css-tricks.com/molten-leading-css/
但是，如果容器不是视口（身体）呢？
在接受的答案下，Alex在评论中提出了这个问题。
这个事实并不意味着vw在某种程度上不能用于容器的大小。 现在看到任何变化都必须假设容器在某种程度上是灵活的。 无论是通过直接百分比width还是通过100％减去边距。 如果容器始终设置为200px宽，那么该点就变成了“模拟” - 然后设置适合该宽度的font-size 。
例1
然而，对于柔性宽度的容器，必须认识到，在某些方面，容器的尺寸仍然远离观察口 。 因此，根据视口的百分比大小差异来调整vw设置，这意味着要考虑父包装的大小。 以这个例子 ：
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = view port width, as 1vw = 1/100th of that
So if the container is 50% of view port (as here)
then factor that into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
*/
font-size: 2.5vw;
}
假设这里div是body一个孩子，它是100%宽度的50% ，这是这个基本情况下的视口大小。 基本上，你想设置一个对你来说很好看的vw 。 正如你可以在上面的CSS中的评论中看到的那样，你可以通过数学方式“思考”完整的视口大小，但是你不需要这样做。 文本将随容器“弯曲”，因为容器会随着视口大小调整而弯曲。 更新：这里是两个不同大小的容器的例子。
例2
您可以通过强制基于此计算来确保视口大小。 考虑这个例子 ：
html {width: 100%;} /* force html to be viewport width */
body {width: 150%; } /* overflow the body */
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = view port width, as 1vw = 1/100th of that
Here, the body is 200% of viewport, but the container is 50%
of view port, so both parents factor into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 3.75vw
(5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
*/
font-size: 3.75vw;
}
尺寸仍然基于视口，但基本上根据容器尺寸本身来设置。
如果容器大小动态变化...
如果容器元素的大小最终通过@media断点或通过javascript动态改变其百分比关系，那么无论基本“目标”是什么，都需要重新计算以保持文本大小的相同“关系”。
以上例1为例。 如果div通过@media或javascript切换到25%宽度，那么同时， font-size需要在媒体查询中或通过JavaScript调整到新的计算5vw * .25 = 1.25 。 这将使文本大小与原始50%容器的“宽度”从视口大小减小一半时的大小相同，但由于其自身百分比计算的更改而减少了，因此文本大小已缩小。
一个挑战
使用CSS3 calc()函数时，动态调整将变得很困难，因为此时该函数不适用于font-size目的。 所以如果你的宽度在calc()上改变，你不能做一个纯粹的CSS3调整。 当然，对边距的宽度进行微小的调整可能不足以保证font-size任何改变，因此可能无关紧要。
这个问题有一个很大的哲学。 最简单的做法是给body（我推荐10）一个特定的字体大小，然后所有其他元素将他们的字体在em或rem。 我会给你和例子来理解这些单位。 Em总是相对于他的父母
body{font-size:10px;}
.menu{font-size:2em;} /* that means 2*10px = 20px */
.menu li{font-size:1.5em;} /* that means 1.5*20px = 30px */
Rem总是与身体相关
body{font-size:10px;}
.menu{font-size:2rem;} /* that means 2*10px = 20px */
.menu li{font-size:1.5rem;} /* that means 1.5*10px = 15px */
而且你可以创建一个脚本来修改相对于你的容器宽度的字体大小。 但这不是我想要的。 因为在一个900像素的宽度容器中，例如，你会有一个12px字体大小的p元素。 并在您的ideea，将在4px字体大小的300px宽容器上。 必须有一个下限。 另一种解决方案是使用媒体查询，以便您可以设置不同宽度的字体。
但我会建议的解决方案是使用一个JavaScript库，可以帮助你。 和迄今为止发现的fittext.js。
链接地址: http://www.djcxy.com/p/15337.html