css3 文字自适应浏览器大小
<!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像素。不信，你就试试。。。
相关推荐
csstpeixun 2020-08-07
如狼 2020-08-15
anyushan 2020-06-30
zego实时音视频 2020-06-23
oKeYue 2020-06-14
xiaoxiaokeke 2020-05-19
AlisaClass 2020-05-16
Justdoit00 2020-04-26
rionchen 2020-04-09
86384798 2020-04-04
贤冰 2020-03-08
云端漂移 2020-03-05
数据与算法之美 2020-01-23
yuanran0 2019-12-25
CaiKanXP 2019-12-21