master

分支 (2)

管理

管理

master

dev_test

web-test
/
字体大小自动适应DIV.html

<!DOCTYPE html>
<html>
	<head>
		<title>phone 设计</title>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
		<style>
			.body {
				font-size: 62.5%
			}

			.div {
				width: 100%;
				height: 20%
			}

			.span {
				font-size: 3.2em;
			}
		</style>
	</head>
	<body>
		<div style=" width:900px; height:500px; overflow:hidden; font-size:12px;" id="str">文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小</div>
		<div class="div"><span class="span">字体怎么随DIV大小变化而变化</span> </div>
	</body>
</html>
<script language="javascript">
	window.onload = function() {
		var str = document.getElementById("str");
		var fontw = 12; //初始的字体大小
		var fonth = fontw + 2; //初始字体高度
		var width = str.offsetWidth; //DIV的宽度
		var height = str.offsetHeight; //div的高度
		var lenstr = str.innerHTML.length; //DIV里文字长度
		fonts = fontw * fonth * lenstr; //字体面积
		divs = width * height; //DIV面积
		//if(fonts>divs){
		var rfont; //重设字体大小为rfont
		rfont = Math.round((Math.sqrt(4 * lenstr * divs - 4 * lenstr * lenstr) - 2 * lenstr) / (2 * lenstr));
		str.style.fontSize = rfont + "px";
		//}
	}
</script>