Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 字体图标与媒体查询（移动优先）
Blogger Information
Blog 16
fans 0
comment 1
visits 5805
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
字体图标与媒体查询（移动优先）
P粉890456325
Original
214 people have browsed it

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <title>Document</title>
  8.     <link rel="stylesheet" href="css/iconfont.css">
  10.     <!-- <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3890717_gk6v9gga9wp.css">
  11.     <style>
  12.         .iconfont{
  13.             font-size: 3em;
  14.             color: red;
  15.         }
  16.     </style> -->
  18.     <link rel="stylesheet" href="css/iconfontcss.css">
  19.     <style>
  20.         .container{
  21.             border: 1px solid #000;
  22.             background-color: lightcyan;
  23.             min-height: 180px;
  24.         }
  25.         .container.horizontal{
  26.             display: flex;
  27.         }
  28.         .box{
  29.             width: 100px;
  30.             height: 100px;
  31.             margin: 20px;
  32.         }
  33.         .box.box1{
  34.             background-color: violet;
  35.         }
  36.         .box.box2{
  37.             background-color: lightgreen;
  38.         }
  39.         .box.box3{
  40.             background-color: coral;
  41.         }
  43.     </style>
  44. </head>
  45. <body>
  46.     <!-- 1.水平 -->
  47.     <div class="container horizontal">
  48.         <div class="box box1">1</div>
  49.         <div class="box box2">2</div>
  50.     </div>
  51. <hr>
  52.     <!-- 2.垂直 -->
  53.     <div class="container">
  54.         <div class="box box1">1</div>
  55.         <div class="box box2">2</div>
  56.         <div class="box box3" style="margin-top: 50px;">3</div>
  57.     </div>
  59.     <!-- 3.包含 父子 -->
  60.     <hr />
  62.     <div class="container">
  64.         <div class="box box3 align">3</div>
  65.     </div>
  66.     <style>
  67.         .box.box3.align{
  68.             margin: initial;
  69.             margin-left: auto;
  70.             margin-right: auto;
  71.         }
  72.         /* 
  73.         css布局规则
  74.         1. 所有元素,必须在一个"宽度受限,而高度不受限"空间进行布局
  75.         2. 不可能在一个宽度和高度,均不受限制的空间进行布局,必须限制一个方向
  76.         3. 人类查看页面, 习惯从上到下,从左到右,默认宽度不变,而高度随内容自动的伸展
  78.         总结: 宽度受限, 高度伸展 
  79.         */
  81.     </style>
  82.     <!-- 1. Unicode  -->
  83.     <!-- <div style="font-family: iconfont"> -->
  84.     <!-- <div class="iconfont unicode"> -->
  85.         <div class="my-font">
  86.             <span>&#xe697;</span>
  87.         </div>
  88.         <hr />
  89.           <!-- 2class-font -->
  90.     <!-- 引用成功后,会有一个class可用, .iconfont  -->
  91.         <div class="iconfont">
  92.             <span class="icon-shezhi active"></span>
  93.         </div>
  95.         <button class="btn small">Btn1</button>
  96.         <button class="btn middle">Btn2</button>
  97.         <button class="btn large">Btn3</button>
  99.         <style>
  100.           /* rem  */
  101.           html {
  102.             /* 1rem = 16px  */
  103.             /* font-size: 1rem; */
  105.             /* 1rem = 10px  */
  107.             /* font-size: 10px; */
  109.             /* 10px = ? rem  */
  110.             /* 10/16 = 0.625rem */
  111.             font-size: 0.625rem;
  112.           }
  114.           .btn {
  115.             background-color: seagreen;
  116.             color: white;
  117.             border: none;
  118.             outline: none;
  119.           }
  120.           .btn:hover {
  121.             cursor: pointer;
  122.             opacity: 0.8;
  123.             transition: 0.3s;
  124.           }
  126.           /* 小按钮 */
  127.           .btn.small {
  128.             font-size: 1.2rem;
  129.           }
  131.           /* 中按钮 */
  132.           .btn.middle {
  133.             font-size: 1.6rem;
  134.           }
  136.           /* 大按钮 */
  137.           .btn.large {
  138.             font-size: 1.8rem;
  139.           }
  141.           /* 设置几个断点 */
  142.           /* 1. 当宽度 < 375px时, 字号 12px */
  143.           @media (max-width: 375px) {
  144.             html {
  145.               font-size: 12px;
  146.             }
  147.           }
  149.           /* 375px - 600px  */
  150.           @media (min-width: 375px) and (max-width: 600px) {
  151.             html {
  152.               font-size: 14px;
  153.             }
  154.           }
  156.           @media (min-width: 600px) {
  157.             html {
  158.               font-size: 16px;
  159.             }
  160.           }
  161.         </style>
  163. </body>
  164. </html>

css文件

  2. @import url('//at.alicdn.com/t/c/font_3890717_gk6v9gga9wp.css');
  3. .active {
  4.   font-size: 3em;
  5.   color: seagreen;
  6. }
  8. .active:hover {
  9.   font-size: 4em;
  10.   color: lightgreen;
  11.   cursor: pointer;
  12.   transition: 0.5s;
  13. }

css文件

  1. /* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
  2. @font-face {
  3.     font-family: 'iconfont';  /* Project id 3890717 */
  4.     src: url('//at.alicdn.com/t/c/font_3890717_gk6v9gga9wp.woff2?t=1676094132575') format('woff2'),
  5.          url('//at.alicdn.com/t/c/font_3890717_gk6v9gga9wp.woff?t=1676094132575') format('woff'),
  6.          url('//at.alicdn.com/t/c/font_3890717_gk6v9gga9wp.ttf?t=1676094132575') format('truetype');
  7.   }
  8.   /*
  9. 1. iconfont: 自定义字体,字体图标
  10. 2. 行内font-family: iconfont
  11. */
  13. /* 1. class叠加 */
  14. .iconfont.unicode {
  15.     font-family: iconfont;
  16.     font-size: 3em;
  17.     color: red;
  18.   }
  19.   /* 2. 语义化新名称 */
  20. .my-font {
  21.     font-family: iconfont;
  22.     font-size: 3em;
  23.     color: blue;
  24.   }
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