Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1025 字体的图标的使用,重点在class方式 2. 媒体查询原理,并描述媒体查询的顺序
Blogger Information
Blog 21
fans 0
comment 0
visits 10024
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
1025 字体的图标的使用,重点在class方式 2. 媒体查询原理,并描述媒体查询的顺序
放手去爱
Original
389 people have browsed it
  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

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