字體大小怎么隨著外部div大小智能伸縮？

問題描述

在div內有幾個字,因為字外部的div的大小是變化的,所以現在需要讓div內的字體大小,隨著div的長寬進行壓縮,或者拉伸

問題解答

舉個例子：HTML里設置font-size,比如取這個font-size為變量 htmlSizediv里的font-size:0.875rem (htmlSize*0.875)

然后div大小變化時，獲取div的實時寬度 比如這個寬度變量叫nowSize用這個實時寬度計算出html里的font-size大小: htmlSize = nowSize*0.2那么HTML的font-size現在就會隨div的寬度變化，而div里的rem單位計算出的font-size也會隨之變化

這里有個移動端用的自適應JS可以參考下:

//這里是隨窗口大小變化 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);

這是屬于響應式的范疇，你可以使用百分比，而且完全可以百度的到的；恰好我有一份筆記，粘貼一下：

css中單位px,em,rem,vh,vw,vmin,vmax的區別及瀏覽器支持情況

px：絕對單位，頁面按精確像素展示

em：相對單位，基準點為父節點字體的大小，如果自身定義了font-size按自身來計算；em不是一個固定的值?？梢栽O置body｛font-size：62.5%｝

rem：相對單位，可理解為”root em”, 相對根節點html的字體大小來計算，CSS3新加屬性，chrome/firefox/IE9+支持。

vw：viewpoint width，視窗寬度，1vw等于視窗寬度的1%。

vh：viewpoint height，視窗高度，1vh等于視窗高度的1%。（vmin：vw和vh中較小的那個。vmax：vw和vh中較大的那個。）

【注意】vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持

in:寸

%:百分比

cm:厘米

mm:毫米

ex：取當前作用效果的字體的x的高度，在無法確定x高度的情況下以0.5em計算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需類內屬性前綴)

ch:以節點所使用字體中的“0”字符為基準，找不到時為0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)