字體大小怎么隨著外部div大小智能伸縮?
問題描述
在div內有幾個字,因為字外部的div的大小是變化的,所以現在需要讓div內的字體大小,隨著div的長寬進行壓縮,或者拉伸
問題解答
回答1:舉個例子: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);
回答2:這是屬于響應式的范疇,你可以使用百分比,而且完全可以百度的到的;恰好我有一份筆記,粘貼一下:
css中單位px,em,rem,vh,vw,vmin,vmax的區別及瀏覽器支持情況
px:絕對單位,頁面按精確像素展示
em:相對單位,基準點為父節點字體的大小,如果自身定義了font-size按自身來計算;em不是一個固定的值。可以設置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+支持)
相關文章:
1. python - 我在使用pip install -r requirements.txt下載時,為什么部分能下載,部分不能下載2. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處3. node.js - nodejs開發中常用的連接mysql的庫4. 網頁爬蟲 - python 爬取網站 并解析非json內容5. mysql - jdbc的問題6. python - 編碼問題求助7. 視頻文件不能播放,怎么辦?8. windows7 ping不通虛擬機VMware上的linux(ubuntu)的ip9. python - 數據與循環次數對應不上10. mysql - 如何減少使用或者不用LEFT JOIN查詢?
