使用class方式引入字体图标和自定义样式以及简单的媒体查询

发布于：2022-07-11 15:23:31  栏目：技术文档

1.class方式引入字体图标

1.先下载矢量图标，我这里用的是阿里的，大家也可以用这个，

我们选择Font class，下载，解压好，等待调用.

2.引用图标库，（为了后期各种因素，我们是不直接使用官方的图标库css的）

引用图标库

@import "../font_icon/iconfont.css";

我们简单演示一下

/* 自定义图标样式 */
.myicon {
  font-size: 5rem;
  color: white;
  font-family: "微软雅黑 Light";
  /* box-shadow: 2px 2px 2px #888; */
  /* border: 1px solid #888; */
}
.myicon2 {
  font-size: 5rem;
  color: white;
  font-family: "微软雅黑 Light";
  /* box-shadow: 2px 2px 2px #888; */
  /* border: 1px solid #888; */
}
.myicon3 {
  font-size: 5rem;
  color: white;
  font-family: "微软雅黑 Light";
  border-right: 1rem;
  /* box-shadow: 2px 2px 2px #888; */
}

看下效果图

我们可以根据自己需求自定义图标的颜色大小的。

2.下面我们简单说下媒体查询(PC优先)

我们先看看默认页面

下面我们简单演示下媒体查询

为了方便查看变化，先设置下html根像素

html {
  font-size: 10px;
}

当分辨率小于1080px变绿色 div宽度=80rem

@media (max-width: 1080px) {
  html {
    background-color: #4caf50;
  }
  div {
    width: 80rem;
    margin: 10px auto 0px;
  }
}

效果图当分辨率小于1080px大于970px背景变红色 div宽度=70rem

@media (min-width: 1080px) and (max-width: 970px) {
  html {
    background-color: red;
  }
  div {
    width: 70rem;
    margin: 10px auto 0px;
  }
}

效果图当分辨率小于970像素背景变黄色 div宽度=60rem

@media (max-width: 970px) {
  html {
    background-color: #c5b82f;
  }
  div {
    width: 60rem;
    margin: 10px auto 0px;
  }
}

效果图

人生没有白走的路，每一步都算数！

相关推荐