asked on

resizing fonts

I have a table with 3 columns. the table has width 100%, and the three columns have width of 15%, 15%, and 70%

When my screen width reduces, then automatically the table widths increase/decrease.

But, how do I make the font size also change? The problem is that if the width reduces too much, the font wraps to the next line. I want the font to also have some percentage size so that it reduces with the width automatically

s8web

You can do this with css3 media queries. Run the attached snippet. When you resize the browser window to <800px, you'll see the font size change.

One caveat. This will not work in IE's earlier than 9, you'll need a little js to fix that.

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style>
			body{font-size:14px;font-family:arial,helvetica,sans-serif;}
			#test{font-size:100%}
			@media screen and (min-width: 480px) and (max-width: 800px){
				#test{font-size:80%}
			}
		</style>
	</head>
	<body>
		<div id="test">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			Curabitur at aliquam neque. Pellentesque et massa pretium nunc tempor 
			feugiat. Phasellus diam diam, tristique eu elementum a, varius quis 
			velit. Suspendisse commodo quam sagittis erat dictum eget vulputate 
			diam luctus. Suspendisse potenti. Praesent ultrices, tellus non 
			tempor tincidunt, dolor augue pretium lectus, sit amet dapibus est 
			massa non risus. Curabitur at diam ut metus vulputate rhoncus eu ac 
			neque. Sed aliquam hendrerit accumsan. Nullam sollicitudin egestas 
			nunc nec tincidunt. Sed varius imperdiet tortor vitae dapibus. Nam 
			aliquam mattis purus, nec convallis augue lobortis nec. Ut dapibus, 
			purus in rutrum accumsan, neque erat commodo lacus, a tincidunt nulla 
			metus ac neque. Sed mollis, nisl sit amet egestas adipiscing, felis 
			lacus sodales mauris, sed gravida arcu elit ac nunc. Fusce sed ligula 
			eu erat ultricies consectetur. Curabitur vitae fermentum lectus. 
			Mauris mattis arcu in est feugiat eu rhoncus tellus iaculis.</p>
		</div>
	</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

s8web

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Scott Fell

Here is a quick sample I made using jquery. You can do the same with pure javascript too.
The code sample is below and working sample http://jsbin.com/ibeciz/2/edit

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){ 
var tblId = $("#tblId").width();
$("#showwidth").html(tblId);
if (tblId > 400) {
		$("td").css("font-size", "100%");
	} 
    else if (tblId > 300) {
		$("td").css("font-size", "60%");
	}
   
	else {
		$("td").css("font-size", "60%");
	}
$(window).resize(function() {
var tblId = $("#tblId").width();
$("#showwidth").html(tblId);
  if (tblId > 400) {
		$("td").css("font-size", "100%");
	} 
    else if (tblId > 300) {
		$("td").css("font-size", "60%");
	}
   
	else {
		$("td").css("font-size", "60%");
	}
 });
});
</script>
<style>
td {
	border: medium solid #333;
}
</style>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<table id="tblId" width="80%" cellpadding="5">
  <tr>
    <td>r1:c1</td>
    <td>r1:c2</td>
    <td>r1:c2</td>
    <td>r1:c3</td>
    <td>r1:c4</td>
  </tr>
  <tr>
    <td>r2:c1</td>
    <td>r2:c2</td>
    <td>r2:c2</td>
    <td>r2:c3</td>
    <td>r2:c4</td>
  </tr>
  <tr>
    <td>r3:c1</td>
    <td>r3:c2</td>
    <td>r3:c2</td>
    <td>r3:c3</td>
    <td>r3:c4</td>
  </tr>
</table>
  <div id="showwidth"></div>
  <div id="showmessg"></div>
</body>
</html>

Open in new window