1025作业 - - php.cn博客

实例演示字体的图标的使用,重点在class方式
常用的字体图标
Unicode:
Class
以阿里矢量图标库: https://www.iconfont.cn 为例。

Class演示：

<!DOCTYPE html>
<html lang="zh-cn">
  <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>class字体图标</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3736338_wc3n165j5l.css" />
  </head>
  <body>
    <div class="iconfont class">
      <span class="icon-baocun"></span>
      <span class="icon-chazhao"> </span>
    </div>
  </body>
</html>

运行结果

实例演示媒体查询原理,并描述媒体查询的顺序
媒体查询主要用于移动端，响应式。
媒体查询：查询媒体宽度来确定元素展示方式
表达式：
@media 媒体类型 and （媒体特性）{你的样式}

常用属性：
max-width：最大宽度
min-width：最小宽度

媒体查询的宽度顺序:
移动端：从小往大
PC 端：反过来写,从大向下写

例：

/* 宽度范围374及以内时的样式 */
@media (max-width: 374px) {
        html {font-size: 12px;}}

 /* 宽度范围375px - 415px时字体样式 */
      @media (min-width: 375px) and (max-width: 414px) {
        html {font-size: 14px;}}

/* 宽度范围> 415px 时字体样式  */
      @media (min-width: 415px) {
        html {font-size: 16px;}}