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

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

表格和布局非常适合任何分辨率，但标准字体在此分辨率下稍微偏大。所以，我希望能找到一个办法只有改变字体..

目前我的CSS是在一个单独的文件，并包含此为TD：

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

的CSS后载入我能确定屏幕大小，然后覆盖这个值？

任何想法或指针？

来源

2013-01-10 JeffVader

使用'em'或''％insted的pt'的'和'px' – Champ

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

你可以改变最大/最小宽度以适合您的需求

来源

2013-01-10 09:28:50

会更好只在最大宽度来定义字体大小：480像素，然后最大宽度：1,024像素x和最后分钟宽度：1024 – nicolallias

试试这一个CSS3。在浏览器窗口调整大小的情况下，它甚至可以减少额外的脚本。

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

来源

2013-09-05 09:38:08

链接可能中断。请在这里添加说明 – Kathir

不知道该服务器有什么问题。你可以看看下面的文章，它解释了使用视口单元的相同概念。 http://generatedcontent.org/post/21279324555/viewportunits –

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

回答

相关问题