字体的图标的使用与媒体查询原理

1025作业

1. 字体图标

阿里图标获取网址: https://www.iconfont.cn/

<!-- 1.1Unicode -->

<!-- 引入Unicode -->
<link rel="stylesheet" href="css/font-icon.css">
<div class="iconfont Unicode">
        <span>&#xe9c8;</span>
        <span>&#xe9c9;</span>
        <span>&#xe9ca;</span>
    </div>

/* 1.1 Unicode方式,安装自定义图标字体 */
/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
    font-family: 'iconfont';  /* Project id 3737992 */
    src: url('//at.alicdn.com/t/c/font_3737992_0g4kvedghnwp.woff2?t=1667110322215') format('woff2'),
         url('//at.alicdn.com/t/c/font_3737992_0g4kvedghnwp.woff?t=1667110322215') format('woff'),
         url('//at.alicdn.com/t/c/font_3737992_0g4kvedghnwp.ttf?t=1667110322215') format('truetype');
  }
  /* ? 1.2  安装自定义字体 */
  @font-face {
    /* !字体名称 */
    font-family: 'iconfont';
    /* !安装字体的路径，远程或者本地 */
    src: url('url');
  }
  .iconfont.Unicode > span{
    /* ! 必须先声明字体名称 */
    font-family: 'iconfont';
    /* 给字体添加一些样式 */
    font-size:xx-large;
    /* color: brown; */
   /* 为文字添加阴影 */
    text-shadow: 1px 1px 5px rgb(165, 57, 57)
  }

实例效果

<!-- 1.2class -->

  <!-- 引入 Class -->
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3737992_0g4kvedghnwp.css">
<!-- font class方式  class为‘iconfont’-->
    <div class="iconfont cc">
        <span class="icon-bofang"></span>
        <span class="icon-daochu"></span>
        <span class="icon-diannao"></span>
    </div>

/* 2.1 Class方式,安装自定义图标字体 */
  /* 因为字体名称是通过class名称导入,所以不需要显式声明字体名称为iconfont  */
  /* font-family: iconfont; */
  .iconfont.cc {
    color:cadetblue;
    font-size: xx-large;
  }
  .iconfont.cc > span:hover{
    transition:0.5s;
    cursor: pointer;
    color:blueviolet;
  }

实例效果

2.媒体查询

   <title>媒体查询</title>
    <!-- 媒体: 屏幕, 手机, 打印机 -->
    <!-- 查询: 查询媒体宽度来确定元素展示方式 -->
    <!--
        布局的前提:
    1. 布局不能在一个无限空间进行,宽,高必须限定一个
    2. 默认限定宽度,而高度随内容不断增长
    -->
</head>
<style>
    html{
        font-size: 10px;
        /* 根字号  1rem=10px*/
    }
    .bu{
        background-color: bisque;
        /* font-size:50px; */
        /* 去掉按钮边框 */
        border: none;
        /* outline: none; */
        color:blue;
    }
    .bu:hover{
        background-color: coral;
        cursor: pointer;
        transition: 0.3s;
        /* 透明度 */
        opacity: 0.8;
        padding: 0.4rem 0.8rem;
    }
    /* 小按钮 */
      .bu.a {
        font-size: 1.2rem;
      }
      /* 中按钮 */
      .bu.b{
        font-size: 1.6rem;
      }
      /* 大按钮 */
      .bu.c{
        font-size: 1.8rem;
      }
      /* 媒体查询 */
      /* 宽度小于374px时,根子号为20px */
      @media (max-width:374px) {
        html{
            font-size: 15px;
        }
      }
      /* 375px<=宽度<=400px, */
      @media (min-width:375px) and (max-width:400px) {
        html{
            font-size: 20px;
        }
      }
      @media (min-width:401px) {
        html{
            font-size: 25px;
        }
      }
      /* 媒体查询的宽度顺序:
      1. 移动端: 从小往大写
      2. PC端: 反过来写,从大向下写 */
</style>

实例效果