1025作业，阿里矢量图的使用

实例演示字体的图标的使用,重点在class方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>媒体查询</title>
    <!-- 阿里矢量图 class -->
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_2825039_dkubvn1ci8o.css"
    />
  </head>
  <body>
    <button class="btn small">按键1</button>
    <button class="btn middle">按键2</button>
    <button class="btn large">按键3</button>
    <!-- 演示class矢量图,用font class -->
    <!-- 块元素里面放入 iconfont class 才生效 -->
    <div class="iconfont class">
      <div class="icon-kefuzixunhui"></div>
      <div class="icon-zan"></div>
    </div>
  </body>
  <style>
    :root {
      font-size: 10px;
    }
    .btn {
      background-color: rgb(243, 38, 72);
      color: #fff;
      border: none;
      /* outline: none; */
    }
    .btn:hover {
      /* 移动显示小手 */
      cursor: pointer;
      /* 透明度 */
      opacity: 0.7;
      transition: 0.8s;
    }
    .btn.small {
      font-size: 1rem;
    }
    .btn.middle {
      font-size: 1.2rem;
    }
    .btn.large {
      font-size: 1.4rem;
    }
    /* 小于375px,1rem = 12px */
    @media (max-width: 375px) {
      :root {
        font-size: 12px;
      }
    }
    /* 大于375px切小于415px 1rem = 14px */
    @media (max-width: 415px) and (min-width: 375px) {
      :root {
        font-size: 14px;
      }
    }
    /* 给予大小宽度也可以用font-size来计算 */
    .icon-kefuzixunhui {
      font-size: 1.5rem;
    }
  </style>
</html>

效果图：

效果图

实例演示字体的图标的使用,重点在class方式

效果图：

相关文章