更改 Div 字体大小和字体答案

【问题标题】：Change Div Font Size & Font更改 Div 字体大小和字体
【发布时间】：2013-11-01 14:32:25
【问题描述】：

如果可能，我想在 div 标签上将字体更改为 Segoe UI 并将字体大小更改为全屏宽度。这是代码：

<!DOCTYPE html>
<html>
<head>
<script>
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}

function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div> 
</body>
</html>

我希望将大小更改为屏幕宽度，因此如果有人通过手机查看它，通常需要大字体的人可以阅读它。

【问题讨论】：

为此使用 media queries。无需使用JS..
“字体大小到全屏宽度”没有意义。在发布的代码中根本没有尝试设置字体大小（或者除了一些奇怪的时间之外的任何东西）；将字体设置为特定的字体系列很简单（尽管代码显示没有尝试这样做），但当然只有在用户的计算机缺少该字体时才会起作用。

标签： css html fonts

【解决方案1】：

CSS3 Media Queries 完全符合您的要求。以下是它们如何工作的示例：

HTML

<div>Lorem ipsum dolor sit amet</div>

CSS

DIV {
    font-size:14pt;
}

@media (max-width:450px) {
    /* Increases font size on smaller screen */
    DIV {
        font-size:24pt;
    }
}

演示：

http://jsfiddle.net/uGfAY/ - 尝试调整浏览器窗口的大小以模拟不同的屏幕尺寸。

【讨论】：

你能用我提供的代码展示一个例子吗？我还没有完全理解
您无法使用纯 CSS 将字体更改为屏幕宽度，但您可以使用多个媒体查询来更改不同分辨率下的字体大小。也许添加 240px、320px、480px、640px、720px 等...然后按比例更改字体大小。

【解决方案2】：

@media screen and (min-width: 481px) {
.className{
font-size:15px;
}

}
@media screen and (max-width: 480px) {
.className{
font-size:20px;
}

}
@media screen and (max-width: 560px) {
.className{
font-size:25px;
}

}
@media screen and (max-width: 720px) {
.className{
font-size:30px;
}

}
@media screen and (max-width: 768px) {
.className{
font-size:13px;
}

}
@media screen and (max-width: 980px) {
.className{
font-size:12px;
}

}

请使用媒体查询

【讨论】：