css - 根据屏幕分辨率更改 TD 字体大小

Question

我正在寻找一个非常基本的示例，如果屏幕分辨率为 1024 * 768 或更小，它将更改 TD 字体大小。

表格和布局适合任何分辨率，但标准字体在此分辨率下略大。所以我希望找到一种方法来改变那种字体..

目前我的 css 在一个单独的文件中，并包含 TD：

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

加载css后，我可以确定屏幕大小然后覆盖这个值吗？

任何想法或指示？

Answer 1

像这样使用 css 媒体查询：

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; 
   }
}

您可以更改最大/最小宽度以满足您的需要

Answer 2

为 CSS3 试试这个。如果浏览器窗口被调整大小，它甚至可以减少额外的脚本。

http://css-tricks.com/viewport-sized-typography/