Change TD font size based on screen resolution

Question

I'm looking for a very basic example that will change the TD font size if the screen resolution is 1024 * 768 or less.

The table and layout fit well at any resolution, but the standard font is slightly to large at this resolution. So I was hoping to find a way to just change that font..

Currently my css is in a separate file and contains this for the TD:

table.format td {
    padding: 3px 10px;  
    text-align: center;
    color: #333;
    font-size:10pt;
}

after the css is loaded could I determine the screen size and then overwrite this value ?

Any ideas or pointers ?

Mick Jones Mick Jones · Accepted Answer · 2013-01-10T09:28:50

Use css media queries like this:

table.format td {
    padding: 3px 10px;  
    text-align: center;
    color: #333;
    font-size:10pt;
}

@media screen and (max-width:480px){
   table.format td {
     font-size:16pt; 
   }
}


@media screen and (max-width:1024px){
   table.format td {
     font-size:12pt; 
   }
}


@media screen and (max-width:1920px){
   table.format td {
     font-size:10pt; 
   }
}

you can change the max/min-width to suite your needs

Change TD font size based on screen resolution

2 Answers