?
Solved

resizing fonts

Posted on 2012-08-27
3
Medium Priority
?
489 Views
Last Modified: 2012-08-27
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
0
Comment
Question by:RTKHOT
  • 2
3 Comments
 
LVL 16

Expert Comment

by:s8web
ID: 38335756
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

0
 
LVL 16

Accepted Solution

by:
s8web earned 800 total points
ID: 38335760
The js for browsers with non-native support:

http://code.google.com/p/css3-mediaqueries-js/
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38335915
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

0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question