数据载入中,请稍后......
 
展开
懒人码库客户端 点击或扫描下载
欢迎来到懒人码库!懒人码库QQ群:19651313
欢迎来到懒人码库!懒人码库QQ群:19651313  
当前位置:懒人码库 > HTML教程 > CSS

CSS实现文字随屏幕变化

2017-06-07 16:43 来源:懒人码库 / 作者:懒人 已被阅读:次 分类:CSS 上一篇:css animation让图标不断旋转 下一篇:没有了
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <!-- saved from url=(0022)http://wap.zznkyy.com/ --> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <META http-equiv="Content-Type" content="text/html; charset=gb2312"> 
  6. <title>ÎÄ×Ö²âÊÔ¹þ¹þ</title> 
  7. <meta name="description" content=""> 
  8. <meta name="keyword" content=""> 
  9. <META name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
  10. <META name="apple-mobile-web-app-capable" content="yes"> 
  11. <META name="apple-mobile-web-app-status-bar-style" content="black">  
  12. <link rel="stylesheet" href="index.css">  
  13. </head> 
  14. <body> 
  15. <span class="txt">ÎÄ×Ö²âÊÔ</span><span class="txt">ÎÄ×Ö²âÊÔ</span><span class="txt">ÎÄ×Ö²âÊÔ</span><span class="txt">ÎÄ×Ö²âÊÔ</span><span class="txt">ÎÄ×Ö²âÊÔ</span><span class="txt">ÎÄ×Ö²âÊÔ</span> 
  16. </body> 
  17. </html> 


 

  1. *{margin:0;padding:0;border:0;} 
  2. html,body{font:14px/21px "HelveticaNeue""Helvetica Neue"HelveticaArialsans-serif;   text-align:center
  3.     filter: progid:DXImageTransform.Microsoft.gradient(enabled=true,GradientType:0,startColorstr='#094da1', endColorstr='#084ca0');  
  4.     color#000000
  5.     -webkit-font-smoothing: antialiased;  
  6.     -webkit-text-size-adjust: 100%;  
  7.  
  8. #nav li  .txt{line-height:227%;font-weight:bold;display:inline-block;white-space:nowrap;word-break: keep-all;-moz-text-shadow1px 1px 1px rgba(0,0,0,0.8); -webkit-text-shadow:1px 1px 1px rgba(0,0,0,0.8); 
  9.     text-shadow1px 1px 1px rgba(0,0,0,0.8); 
  10.     vertical-align:middle
  11.  
  12. @media only screen and (max-width:320px)  
  13.  
  14. .txt{font-size:110%;}  
  15.  
  16. }    
  17. @media only screen and (min-width321px) and (max-width360px)  
  18.  
  19.  .txt{font-size:120%;}  
  20.  
  21. @media only screen and (min-width361px) and (max-width480px)  
  22.  
  23.  .txt{font-size:155%;}  
  24.  
  25. @media only screen and (min-width481px) and (max-width570px)  
  26. {    
  27.  
  28.  .txt{font-size:180%;}  
  29.  
  30. @media only screen and (min-width571px) and (max-width640px)  
  31. {    
  32.  .txt{font-size:210%;}  
  33.  
  34. @media only screen and (min-width641px
  35.  
  36.  .txt{font-size:210%;}  
  37.  
标签:css屏幕
小贴士:懒人码库 为网页前端人员提供建站常用的广告代码和网页特效,内容涵盖焦点图,导航菜单,jQuery代码,图片特效,对联广告,日历控件,在线客服等。