Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 字体图标的引用及实例媒体查询
Blogger Information
Blog 12
fans 0
comment 0
visits 17554
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
字体图标的引用及实例媒体查询
php001
Original
484 people have browsed it

字体图片的引用

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

  • 自定义样式实例代码：

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

媒体查询@media

  • 使用到的属性：max-width min-width
  • max-width:设置一个最大宽度
  • min-width:设置一个最小宽度
    • 实例代码分析：
      1. /* 当屏幕分辨率在480px与1199px之间时，给html设置固定大小字号为14px */
      2. @media (max-width:1199px) and (min-width:480px){
      3.     html{
      4.         font-size: 14px;
      5.     }
      6. }
  • 实例效果图：

    代码分享（全）：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <!-- <link rel="stylesheet" href="font_ico\iconfont.css"> -->
    8.   <link rel="stylesheet" href="css/style.css">
    9.   <title>媒体查询</title>
    10. </head>
    11. <body>
    12.   <div class="box">
    13.       <div class="one"></div>
    14.       <div class="two"></div>
    15.       <div class="three"></div>
    16.   </div>
    17. <style>
    18.   /* 设置根目录的字号大小 */
    19.   html {
    20.       font-size: 14px;
    21.   }
    22.   /* 设置box盒子为flex布局 */
    23.   .box{
    24.       display: flex;
    25.   }
    26.   /* 给三个one two three盒子设置默认样式 */
    27.   .one{
    28.       width: 10rem;
    29.       height: 5rem;
    30.       margin: auto;
    31.       background-color: blue;
    32.   }
    33.   .two{
    34.       width: 10rem;
    35.       height: 5rem; 
    36.       margin: auto;
    37.       background-color: aqua;
    38.   }
    39.   .three{
    40.       width: 10rem;
    41.       height: 5rem; 
    42.       margin: auto;
    43.       background-color: lightgreen;
    44.   }
    45.   /* 媒体查询@media screen {} */
    46.   /* 当屏幕分辨率大于或等于1200px时，给html设置固定大小字号 */
    47.   @media (min-width:1200px) {
    48.       html{
    49.           font-size: 16px;
    50.       }
    51.   }
    52.   /* 当屏幕分辨率在480px与1199px之间时，给html设置固定大小字号 */
    53.   @media (max-width:1199px) and (min-width:480px){
    54.       html{
    55.           font-size: 14px;
    56.       }
    57.   }
    58.   /* 限定最大宽度为480px,如若出现小于480px时 html将固定一个字号大小，不会在变化 */
    59.   @media (max-width:480px){
    60.       html{
    61.           font-size: 13px;
    62.       }
    63.   }
    64. </style>
    65. </body>
    66. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post