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/

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

2 个答案: