引入阿里图标

案例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>字体图标使用</title>
  8. <link rel="stylesheet" href="css/zuoye1.css">
  9. </head>
  10. <body>
  11. <!--使用大尺寸font-size-b-->
  12. <span class="iconfont icon-icon-wangluo font-size-b">111</span>
  13. <!--使用小尺寸font-size-s-->
  14. <span class="iconfont icon-icon-wangluo font-size-s">111</span>
  15. </body>
  16. </html>
  1. <--zuoye1.css-->
  2. //引入字体库文件的css
  3. @import url('font_icon/iconfont.css');
  4. //自定义尺寸
  5. //大尺寸
  6. .font-size-b{
  7. font-size: 35px;
  8. color: red;
  9. }
  10. //小尺寸
  11. .font-size-s{
  12. font-size: 10px;
  13. color: red;
  14. }

效果图

效果图

响应式代码

案例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>媒体查询</title>
  8. <link rel="stylesheet" href="css/zuoye.css">
  9. </head>
  10. <body>
  11. <button class="btn small">btn1</button>
  12. <button class="btn middle">btn2</button>
  13. <button class="btn large">btn3</button>
  14. </body>
  15. </html>
  1. <--zuoye.css-->
  2. html{font-size: 10px;}
  3. .btn{outline: none;border: none;color: white;background-color: seagreen;}
  4. .small{ font-size: 1.2rem;}
  5. .middle{font-size: 1.6rem;}
  6. .large{font-size: 2rem;}
  7. /* 大屏幕 :大于等于1200px*/
  8. @media (min-width: 1200px) {
  9. html{ font-size: 80px;}
  10. }
  11. /*默认*/
  12. @media (min-width: 980px){
  13. html{font-size: 60px; }
  14. }
  15. /* 平板电脑和小屏电脑之间的分辨率 */
  16. @media (min-width: 768px) and (max-width: 979px) {
  17. html{ font-size: 50px; }
  18. }
  19. /* 横向放置的手机和竖向放置的平板之间的分辨率 */
  20. @media (max-width: 767px) {
  21. html{font-size: 40px;}
  22. }
  23. /* 横向放置的手机及分辨率更小的设备 */
  24. @media (max-width: 480px) {
  25. html{font-size: 30px;}
  26. }

效果图

效果图

更多相关文章

  1. 在Ubuntu上下载、编译和安装Android最新源代码
  2. 最初程序员的思维“修炼”之四——Android平台开发的“强制关闭
  3. Android软件广告屏蔽方法及代码
  4. 【Android应用开发】-(7)安全性设计(完整版请参考官方)
  5. Android如何自定义title
  6. Android输入输出机制之来龙去脉之前生后世
  7. android ndk之opencv+MediaCodec硬编解码来处理视频动态时间水印
  8. Android(安卓)怎样获得手机信息(四)
  9. android binder和aidl java代码理解(一)

随机推荐

  1. android 自学笔记2-布局
  2. Android 多式样ProgressBar
  3. 【已解决】无法打开Android Virtual Devi
  4. android中各种颜色在drawable.xml的值
  5. Android application testing with the A
  6. Android ProgressBar的动画效果
  7. Ten Tips for Android Application Devel
  8. Develop Android on archlinux 64
  9. Android ShutdownThread.java源码分析
  10. Custom Android Window Title