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

实例演示使用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" />
    <!-- 引入css样式表 -->
    <link rel="stylesheet" href="demo.css" />
    <title>引入字体图标</title>
  </head>
  <body>
    <iframe frameborder="1" name="content"></iframe>
    <div>
      <a href="www.baidu.com" target="content"><span class="iconfont icon-shouye"></span></a>
      <span class="iconfont icon-fenlei"></span>
      <span class="iconfont icon-icon03"></span>
    </div>
  </body>
</html>

/* 引入第三方字体 */
@import url("font_icon/iconfont.css");
* {
  margin: 0;
  padding: 0;
}
html {
  /* 设置根的字体大小 */
  font-size: 10px;
}
div .iconfont {
  /* 3rem,指的是根字体大小的3倍 */
  font-size: 3rem;
  margin: 3rem;
}
div {
  margin: 1rem;
}

字体图标效果图

实例演示媒体查询(PC优先模式)

<!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>实例演示媒体查询(PC优先模式)</title>
    <style>
      /* 设置根原素字体大小为5px */
      html {
        font-size: 5px;
      }
      button.btn:hover {
        cursor: pointer;
        opacity: 0.7;
        transition: 0.8s;
      }
      body > button:nth-of-type(1) {
        font-size: 1rem;
      }
      body > button:nth-of-type(2) {
        font-size: 1.5rem;
      }
      body > button:last-of-type {
        font-size: 2rem;
      }
      /* 2. PC优先: 先从最大屏的设备进行适配 */
      /* 1000, 800 600 450  350  */
      @media (min-width: 1000px) {
        html {
          font-size: 25px;
        }
      }
      @media (max-width: 999px) and (min-width: 800px) {
        html {
          font-size: 20px;
        }
      }
      @media (max-width: 799px) and (min-width: 600px) {
        html {
          font-size: 15px;
        }
      }
      @media (max-width: 599px) and (min-width: 450px) {
        html {
          font-size: 10px;
        }
      }
      @media (max-width: 449px) and (min-width: 350px) {
        html {
          font-size: 5px;
        }
      }
    </style>
  </head>
  <body>
    <button class="btn">button1</button>
    <button class="btn">button2</button>
    <button class="btn">button3</button>
  </body>
</html>

实例演示使用class方式引入字体图标,以及自定义样式

实例演示媒体查询(PC优先模式)

相关文章