在做html相關的東西的時候經常會遇到這樣的問題，容器大小（長x寬）固定，容器包含內容（特指文字）多少不固定，這個時候就讓人很苦惱了，將字型大小設定成多少才合適呢？下面看看我的解決思路：
首先要知道網頁中所說的字型大小的px指的是字型的寬和高，也就是說在35px顯示乙個中文字元，該字元占去35x35的空間。知道這個之後，我們就可以想辦法動態的根據容器大小和包含內容多少顯示文字了。
首先要做的就是計算乙個字串的長短（乙個中文字元記1個，乙個英文本元記0.5個），我這裡使用了簡單的判斷，當蚊子unicode編碼大於255的時候計算乙個漢字字元，小於255的時候計算0.5個漢字字元：
var l=0.0;for(var i in
str)
l=match.ceil(l);
也許機制的你已經注意到了，在最後我對長度進行了向上捨入，如果不進行這個操作也可以，但是為了不要那麼多麻煩的小數直接給他向上捨入。
var font_size=math.floor(math.sqrt(parseint(width)*parseint(height)/l));
這裡計算的font_size是乙個剛好合適的情況，如下面圖2014-11-11 1所示
inin
inin
inin
inin
inin
inin
inin
in圖 2014-11-11 1
但往往情況會是這樣的
inin
inin
inin
inin
inin
inin
in圖 2014-11-11 2
這樣的情況就會導致容器被這些字的體積加兩個空閒位置撐破了，因此就要進行接下來這一步，進行修正，調整字型大小，準確的說是減小，知道剛好裝得下位置：
var rows=math.floor(width/font_size);var lines=math.ceil(l/rows);
while(lines*rows*font_size*font_size>width*height)
這裡是檢測所有位置大小的總和（包括用到的位置和空閒位置），直到它剛好小於等於容器體積，此時的字型就是滿足要求的字型。
下面看看完整程式：
fontsize=function(width,height,str,maxsize)
l=math.ceil(l);
var font_size=math.floor(math.sqrt(parseint(width)*parseint(height)/l));
//看下是否真的放得下
var rows=math.floor(width/font_size);
var lines=math.ceil(l/rows);
while(lines*rows*font_size*font_size>width*height)
return font_size>maxsize?maxsize:font_size;
}
這裡面還進行了最大字型設定，免得只有乙個字的時候，字型過分的大。
好了今天就到這裡。
send me~
根據容器大小設定字型
如果容器大小固定，怎麼根據容器大小變換字型的font size，使無論字型多少都不溢位容器呢 最小為12px 在網上查了資料，總結如下 html 如果有來生 要做一棵樹站成永恆 沒有悲傷的姿勢 一半在塵土裡安詳 一半在空中飛揚 一半散落陰涼 一半沐浴陽光 非常沉默 非常驕傲 從不依靠 從不尋找 可以...
根據螢幕寬高比適配文字大小 和 布局
很久沒寫文章了,畢竟新人就只能寫給新人的福利了,還是那句話,讓新人少走一點彎路.談技術之前,先來說明靈感在於哪,老規矩,上圖 首先,除了iphone4,iphone5,6,6plus機型,都是成比例的,也就是每個螢幕的寬度 高度都是相等的,所以我們可以利用這個成比例,寫以下 螢幕適配 判斷裝置型別 ...
iframe顯示html文字
以前的專案用到了ifram標籤，直接設定src某個頁面的url即可，可以今天後台同學要求前端請求頁面資料的時候帶引數，並且要是post請求，這就尷尬了，iframe的src是乙個get請求，本來帶引數直接在url後面追加引數即可，用post請求只能接收到html的文字資料。一番搜尋之後，終於找到如下...