字體大小怎么隨著外部div大小智能伸縮?
問(wèn)題描述
在div內(nèi)有幾個(gè)字,因?yàn)樽滞獠康膁iv的大小是變化的,所以現(xiàn)在需要讓div內(nèi)的字體大小,隨著div的長(zhǎng)寬進(jìn)行壓縮,或者拉伸
問(wèn)題解答
回答1:舉個(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);
回答2:這是屬于響應(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+支持)
相關(guān)文章:
1. boot2docker無(wú)法啟動(dòng)2. java - SSH框架中寫分頁(yè)時(shí)service層中不能注入分頁(yè)類3. 關(guān)于docker下的nginx壓力測(cè)試4. docker安裝后出現(xiàn)Cannot connect to the Docker daemon.5. 為什么我ping不通我的docker容器呢???6. mac里的docker如何命令行開(kāi)啟呢?7. node.js - antdesign怎么集合react-redux對(duì)input控件進(jìn)行初始化賦值8. 老師,按tab鍵不起作用怎么回事9. docker鏡像push報(bào)錯(cuò)10. dockerfile - 為什么docker容器啟動(dòng)不了?

網(wǎng)公網(wǎng)安備