618項(xiàng)目中遇到過這樣一個(gè)問題，移動(dòng)端各種機(jī)型屏幕寬度，各頁面中的標(biāo)題字?jǐn)?shù)是不定的，設(shè)計(jì)師根據(jù)375寬的屏設(shè)計(jì)的字體大小為20px，在iPhone5中320的屏寬下某些頁面由于標(biāo)題文字長了些就出現(xiàn)了標(biāo)題折行。所以提出一個(gè)問題，可否實(shí)現(xiàn)字體大小根據(jù)容器寬度自適應(yīng)，即在小屏幕下由于標(biāo)題字?jǐn)?shù)多出現(xiàn)折行的話，就減小字體大小，從而達(dá)到不折行的效果。
首先是想從CSS方向上解決，然而搜索一番沒有找到解決方案，要想實(shí)現(xiàn)需要計(jì)算協(xié)助，css計(jì)算目前只有calc()方法，然而calc（）不能解決這個(gè)問題。所以這里借助js來從三個(gè)方向上解決問題。
方向一 動(dòng)態(tài)計(jì)算字體大小
通過計(jì)算原有font-size下文案所撐起的寬度，除以容器寬度（這里設(shè)定容器寬度為屏幕寬度），得出需要縮放的系數(shù)，將系數(shù)換算成百分比賦值給font-size即可。
代碼如下：
<div class="hd hd1">
<span class="hd-text">這個(gè)標(biāo)題很長哦可能一行放不下的怎么辦呢</span>
</div>
<script>
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 + '%';
</script>
方向二 縮放容器
該方案類似方案一，只是縮放的不是font-size，而是通過縮放容器。使用transform的scale或zoom，其中transform的scale需要設(shè)定transform-origin: 0 0;且只對block元素有效（inline-block也有效）
代碼如下：
<div class="hd">
<span class="hd-text">這個(gè)標(biāo)題很長哦可能一行放不下的怎么辦呢</span>
</div>
<script>
var hdWidth = document.body.getBoundingClientRect().width;
var textWidth = document.getElementsByClassName('hd-text')[0].offsetWidth;
var scale = hdWidth / textWidth;
document.getElementsByClassName('hd-text')[0].style.zoom = scale;
</script>
方向三 svg視口和視圖框
最近在學(xué)習(xí)SVG，所以想到了SVG視口和視圖框。同樣也是需要計(jì)算指定font-size下的文字寬度，然后就是應(yīng)用視口和視圖框的原理，將寬度賦值給viewBox。
代碼如下：
<svg class="hd" width="100%" height="50" viewBox="0 0 320 50" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text class="svg-text" x="0" y="20">這個(gè)標(biāo)題很長哦可能一行放不下的怎么辦呢</text>
</svg>
<script>
var textWidth = document.getElementsByClassName('svg-text')[0].getBoundingClientRect().width;
document.getElementsByClassName('hd3')[0].setAttribute('viewBox', '0 0 ' + textWidth+ ' 50');
</script>
