問(wèn)題描述

在div內(nèi)有幾個(gè)字,因?yàn)樽滞獠康膁iv的大小是變化的,所以現(xiàn)在需要讓div內(nèi)的字體大小,隨著div的長(zhǎng)寬進(jìn)行壓縮,或者拉伸

問(wèn)題解答

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

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

這里有個(gè)移動(dòng)端用的自適應(yīng)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);

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

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

px：絕對(duì)單位，頁(yè)面按精確像素展示

em：相對(duì)單位，基準(zhǔn)點(diǎn)為父節(jié)點(diǎn)字體的大小，如果自身定義了font-size按自身來(lái)計(jì)算；em不是一個(gè)固定的值?？梢栽O(shè)置body｛font-size：62.5%｝

rem：相對(duì)單位，可理解為”root em”, 相對(duì)根節(jié)點(diǎn)html的字體大小來(lái)計(jì)算，CSS3新加屬性，chrome/firefox/IE9+支持。

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

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

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

in:寸

%:百分比

cm:厘米

mm:毫米

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

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