search

博客列表 >1025 字体的图标的使用,重点在class方式 2. 媒体查询原理,并描述媒体查询的顺序

1025 字体的图标的使用,重点在class方式 2. 媒体查询原理,并描述媒体查询的顺序

放手去爱
放手去爱原创
2022年10月28日 19:36:36386浏览
  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.     <title>字体图标</title>
  8.     <link rel="stylesheet" href="1025-01css.css" />
  9.     <link
  10.       rel="stylesheet"
  11.       href="//at.alicdn.com/t/c/font_3735622_lqktuxdtoqp.css"
  12.     />
  13.     <style>
  14.       :room {
  15.         font-size: 10px;
  16.       }
  17.             /* 
  18.       媒体查询 
  19.       1rem = 10px  , 1rem = 12px
  20.       < 380px , 1rem = 12px 
  21.       小于380px ,意思就是不大于380px    
  22.       */
  23.       @media (max-width: 380px) {
  24.         html {
  25.           font-size: 10px;
  26.         }
  27.       }
  28.       @media (min-width: 380px) and (max-width: 415px) {
  29.         html {
  30.           font-size: 12px;
  31.         }
  32.       }
  33.       /* 媒体查询的宽度顺序：
  34.       1.移动端：从小往大写
  35.       2.PC端：从大往小写
  36.       */
  37.       .iconfont.class {
  38.         font-size: x-large;
  39.         color: red;
  40.         display: inline-block;
  41.         border: 1px solid #098;
  42.         width: 5rem;
  43.       }
  44.       .iconfont.class span {
  45.         font-size: 1.2rem;
  46.         width: 5rem;
  47.         display: block;
  48.         text-align: center;
  49.       }
  51.       .iconfont.class .gouwusz {
  52.         font-size:1.2rem;
  53.         color: red;
  54.         width: 5rem;
  55.       }
  56.        .iconfont.class span:hover {
  57.         color: lightgreen;
  58.         cursor: pointer;
  59.         transition: color 0.5s linear;
  60.       }
  62.     </style>
  63.   </head>
  64.   <body>
  65.     <!-- 字体图标 -->
  66.     <!-- unicode  -->
  67.     <!-- <div class="iconfont unicode">
  68.       <span>&#xe8b8;</span><span>&#xe622;</span>
  69.     </div> -->
  71.     <div class="iconfont class">
  72.       <span class="icon-xingzhuanggongnengtubiao-"></span><span class="gouwusz">购物车</span>
  73.     </div>
  74.     <div class="iconfont class">
  75.       <span class="icon-shezhi"></span></span><span  class="gouwusz">设置</span>
  76.     </div>
  78.   </body>
  79. </html>

效果图1
效果图2

上一条：1025作业下一条：你的技能，能变现！
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多