字体图标的引用及实例媒体查询 - web大前端

首页 > 博客列表 > 字体图标的引用及实例媒体查询

博主信息

博文 12

粉丝 0

访问量 23505

专题推荐

更多>

字体图片的引用

阿里巴巴矢量图库https://www.iconfont.cn 自行下载后引用html页面中
- 第一步：将事先创建好的css文件使用link标签在html中引用
```
<link rel="stylesheet" href="css/style.css">
```
- 第二步：打开下载好的字体图标文件，找到里面的demo_index.html文件在浏览器中打开，选择 Font class 方法即可查看相关引入步骤，都是傻瓜式操作不过多介绍。
- 引用实例代码
```
<div>
    
    <span class="iconfont icon-wode mine"></span>
</div>
```

自定义样式实例代码：

/* 1. 引入官方的字体图标库 */
@import url(../font_ico/iconfont.css);
/* 自定义图标样式 */
.mine{
   font-size: 60px;
   background-color: blue;
  }

效果图：

媒体查询@media

使用到的属性：max-width min-width
max-width:设置一个最大宽度

min-width:设置一个最小宽度

实例代码分析：

/* 当屏幕分辨率在480px与1199px之间时，给html设置固定大小字号为14px */
@media (max-width:1199px) and (min-width:480px){
    html{
        font-size: 14px;
    }
}

实例效果图：

代码分享（全）：

<!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">
  <!-- <link rel="stylesheet" href="font_ico\iconfont.css"> -->
  <link rel="stylesheet" href="css/style.css">
  <title>媒体查询</title>
</head>
<body>
  <div class="box">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
  </div>
<style>
  /* 设置根目录的字号大小 */
  html {
      font-size: 14px;
  }
  /* 设置box盒子为flex布局 */
  .box{
      display: flex;
  }
  /* 给三个one two three盒子设置默认样式 */
  .one{
      width: 10rem;
      height: 5rem;
      margin: auto;
      background-color: blue;
  }
  .two{
      width: 10rem;
      height: 5rem; 
      margin: auto;
      background-color: aqua;
  }
  .three{
      width: 10rem;
      height: 5rem; 
      margin: auto;
      background-color: lightgreen;
  }
  /* 媒体查询@media screen {} */
  /* 当屏幕分辨率大于或等于1200px时，给html设置固定大小字号 */
  @media (min-width:1200px) {
      html{
          font-size: 16px;
      }
  }
  /* 当屏幕分辨率在480px与1199px之间时，给html设置固定大小字号 */
  @media (max-width:1199px) and (min-width:480px){
      html{
          font-size: 14px;
      }
  }
  /* 限定最大宽度为480px,如若出现小于480px时 html将固定一个字号大小，不会在变化 */
  @media (max-width:480px){
      html{
          font-size: 13px;
      }
  }
</style>
</body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

Markdown常用语法

2022-06-24 21:45:39