您的位置：首页 > Web前端 > CSS

CSS实现文字随屏幕变化

2016-01-24 13:30 591 查看

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

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航