"class"使用图标以及媒体查询原理

1 Class使用图标

1.1 图标下载

-阿里图标:'https://www.iconfont.cn/'

1.2 代码

 <!-- 引入图标库 -->
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_2952236_8q6uhlh6i1r.css" />

    <div>
        <span class="icon-gouwucheman"></span>
        <span class="icon-31wode"></span>
    </div>

效果图展示

媒体查询原理

代码

<!-- 媒体：屏幕，手机，打印机 -->
    <!-- 查询: 查询媒体宽度来确定元素展示方式 -->
    <!-- 布局的前提:
    1.布局不能在一个无限空间进行,宽,高必须限定一个
    2.默认限定宽高,而高度随内容不断增长 -->
    <button class="btn small">按钮1</button>
    <button class="btn middle">按钮2</button>
    <button class="btn large">按钮3</button>

css

/* 媒体查询 */
      /* < 375px ,1rem =  12px */
      @media (max-width: 375px) {
        html {
          font-size: 12px;
        }
      }
      /* 375px-415px 1rem=14px */
      @media (min-width: 375px) and (max-width: 414px) {
        html {
          font-size: 14px;
        }
      }
      /* > 415px :1rem=16px */
      @media (max-width: 415px) {
        html {
          font-size: 16px;
        }
      }
      /* 媒体查询的宽度顺序：移动端：1.从小往大写
      2.PC端反方向写
       */

总结

1.如果是判断最小值 (min-width)，那么就应该从小到大写--bootstrap就是判断最小值，从小到大写
2.如果是判断最大值 (max-width)，那么就应该从大到小写