更改Div字体大小和字体

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

<!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>

我想要的大小，因此，如果有人从电话这将是可读谁需要大的字体大小，通常人们看着它更改为屏幕宽度。

来源

2013-10-31 sebdroid

使用** [媒体查询（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries）**此。无需使用JS .. –

“字体大小到全屏宽度”没有意义。在发布的代码中根本没有尝试设置字体大小（或任何超出某些奇怪玩法的时间）;将字体设置为特定的字体系列是微不足道的（尽管代码没有显示任何尝试），但当然只有当用户的计算机缺少该字体时才会工作。 –

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

DEMO：

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

来源

2013-10-31 19:24:17

你能用我提供的代码展示一个例子吗？我还没有完全理解 – sebdroid

您不能使用纯CSS将字体更改为屏幕宽度，但可以使用多个媒体查询以不同分辨率更改字体大小。也许在240像素，320像素，480像素，640像素，720像素等等添加......然后按比例更改字体大小。 –

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

}

请使用媒体查询

来源

2013-11-01 06:32:25

更改Div字体大小和字体

回答

相关问题