我很难理解字体缩放。
我目前有一个字体大小为100%的网站。但这是100%的吗?这似乎是在16个像素处计算出来的。
我的印象是,100%会以某种方式指代浏览器窗口的大小,但显然不是因为无论窗口大小调整为移动宽度还是宽屏桌面,都是16像素。
如何使站点上的文本与其容器相关?我尝试过使用它们,但这也无法扩展。
我的理由是,当你调整大小时,像我的菜单这样的东西会变得压扁,所以我需要减少.menuItem等元素相对于容器宽度的px字体大小。(例如,在大型桌面上的菜单中,22px的效果非常好。向下移动到平板电脑宽度,16px更合适。)
我知道我可以添加断点,但我真的希望文本能够缩放并具有额外的断点,否则,我将以每100像素宽度减少数百个断点来控制文本。
在艺术上,如果您需要在相同的宽度内放置两行或多行文本,而不管它们的字符数如何,那么您有很好的选择。
最好找到一个动态解决方案,这样无论输入什么文本,我们都会得到一个很好的显示。
让我们看看我们可以如何接近。
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(“字体大小”))作为引用,然后计算后续行的字体大小。
这个问题有一个大的哲学。
最简单的方法是给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{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库来帮助您实现这一点。还有到目前为止我找到的fitext.js。