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

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