CSS实现文字随屏幕变化

最新推荐文章于 2022-12-14 11:48:04 发布

LuckyJiang.2021

最新推荐文章于 2022-12-14 11:48:04 发布

阅读量6.3k

点赞数 1

分类专栏： Web前端-CSS 文章标签： css

本文链接：https://blog.csdn.net/gingerredjade/article/details/50573498

版权

Web前端-CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0022)http://wap.zznkyy.com/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>ÎÄ×Ö²âÊÔ¹þ¹þ</title>
<meta name="description" content="">
<meta name="keyword" content="">
<META name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<META name="apple-mobile-web-app-capable" content="yes">
<META name="apple-mobile-web-app-status-bar-style" content="black"> 
<link rel="stylesheet" href="index.css"> 
</head>
<body>
<span class="txt">ÎÄ×Ö²âÊÔ</span><span class="txt">ÎÄ×Ö²âÊÔ</span><span class="txt">ÎÄ×Ö²âÊÔ</span><span class="txt">ÎÄ×Ö²âÊÔ</span><span class="txt">ÎÄ×Ö²âÊÔ</span><span class="txt">ÎÄ×Ö²âÊÔ</span>
</body>
</html>

*{margin:0;padding:0;border:0;}
html,body{font:14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;	text-align:center;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=true，GradientType:0,startColorstr='#094da1', endColorstr='#084ca0');	
	color: #000000;
	-webkit-font-smoothing: antialiased; 
	-webkit-text-size-adjust: 100%;	
}

#nav li  .txt{line-height:227%;font-weight:bold;display:inline-block;white-space:nowrap;word-break: keep-all;-moz-text-shadow: 1px 1px 1px rgba(0,0,0,0.8); -webkit-text-shadow:1px 1px 1px rgba(0,0,0,0.8);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
	vertical-align:middle}

@media only screen and (max-width:320px) 
{

.txt{font-size:110%;} 

}	
@media only screen and (min-width: 321px) and (max-width: 360px) 
{

 .txt{font-size:120%;} 

}
@media only screen and (min-width: 361px) and (max-width: 480px) 
{

 .txt{font-size:155%;} 

}
@media only screen and (min-width: 481px) and (max-width: 570px) 
{	

 .txt{font-size:180%;} 

}
@media only screen and (min-width: 571px) and (max-width: 640px) 
{	
 .txt{font-size:210%;} 

}
@media only screen and (min-width: 641px)
{

 .txt{font-size:210%;} 

}