618项目中遇到过这样一个问题,移动端各种机型屏幕宽度,各页面中的标题字数是不定的,设计师根据375宽的屏设计的字体大小为20px,在iPhone5中320的屏宽下某些页面由于标题文字长了些就出现了标题折行。所以提出一个问题,可否实现字体大小根据容器宽度自适应,即在小屏幕下由于标题字数多出现折行的话,就减小字体大小,从而达到不折行的效果。
首先是想从CSS方向上解决,然而搜索一番没有找到解决方案,要想实现需要计算协助,css计算目前只有calc()方法,然而calc()不能解决这个问题。所以这里借助js来从三个方向上解决问题。
方向一 动态计算字体大小
通过计算原有font-size下文案所撑起的宽度,除以容器宽度(这里设定容器宽度为屏幕宽度),得出需要缩放的系数,将系数换算成百分比赋值给font-size即可。
代码如下:
这个标题很长哦可能一行放不下的怎么办呢
var hdWidth = document.body.getBoundingClientRect().width;
var textWidth = document.getElementsByClassName(hd-text)[0].offsetWidth;
var scale = hdWidth / textWidth;
document.getElementsByClassName(hd-text)[0].style.fontSize = scale * 100 + \%;
方向二 缩放容器
该方