1.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>字体图标导入t</title>
    <!-- <link rel="stylesheet" href="./font__icon/iconfont.css" /> -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <span class="iconfont icon-naozhong myico"></span>
  </body>
</html>

1.1css部分

/* css外部文件中设置字体图标，而不是直接在html中引用 */
/* 1.引入官方字体图标库
@import "foot_icon/iconfoot.css"; */
@import url(font__icon/iconfont.css);
.myico {
  font-size: 4em;
  background-color: pink;
}

2.媒体查询（pc模式优先）

<style>
 body {
        background-color: tan;
      }
      @media (max-width: 1000px) {
        body {
          background-color: blue;
        }
      }
      @media (max-width: 800px) {
        body {
          background-color: olive;
        }
      }
      @media (max-width: 501px) {
        body {
          background-color: green;
        }
      }
        </style>

1.实例演示使用class方式引入字体图标,以及自定义样式 2. 实例演示媒体查询(PC优先模式)

1.class方式引入字体图标，以及自定义样式

1.1css部分

2.媒体查询（pc模式优先）