<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 Demo</title>
<style type="text/css">
#intro{
font-size: 40px;
-webkit-transition:font-size 0.2s ease-out;
}
@media only screen and (max-width: 1200px) { #intro{ font-size: 39px; }}
@media only screen and (max-width: 1100px) { #intro{ font-size: 38px; }}
@media only screen and (max-width: 1000px) { #intro{ font-size: 37px; }}
@media only screen and (max-width: 900px) { #intro{ font-size: 36px; }}
@media only screen and (max-width: 800px) { #intro{ font-size: 35px; }}
@media only screen and (max-width: 700px) { #intro{ font-size: 34px; }}
@media only screen and (max-width: 600px) { #intro{ font-size: 33px; }}
@media only screen and (max-width: 500px) { #intro{ font-size: 32px; }}
@media only screen and (max-width: 400px) { #intro{ font-size: 31px; }}
@media only screen and (max-width: 300px) { #intro{ font-size: 30px; }}
</style>
</head>
<body>
<div id="intro">我是靖鸣君 我是靖鸣君 我是靖鸣君</div>
</body>
</html>
以上代码,很简单,当浏览器宽度在300像素的时候,文字大小为30PX,浏览器宽度在400像素的时候,文字大小为31像素。不信,你就试试。。。