search

博客列表 >字体图标与媒体查询（移动优先）

字体图标与媒体查询（移动优先）

P粉890456325
P粉890456325原创
2023年02月12日 11:18:54213浏览

  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.   }
上一条：字体图标的引入方式Unicode和font class与显示下一条：CSS选择器（基本+上下文+伪类）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多