Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 实例演示字体的图标和媒体查询
Blogger Information
Blog 24
fans 0
comment 0
visits 10888
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
实例演示字体的图标和媒体查询
皮皮志
Original
760 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.     <style>
  9.         /* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
  10. @font-face {
  11.   font-family: 'iconfont';  /* Project id 3729000 */
  12.   src: url('//at.alicdn.com/t/c/font_3729000_n4lju3ux24b.woff2?t=1666699928473') format('woff2'),
  13.        url('//at.alicdn.com/t/c/font_3729000_n4lju3ux24b.woff?t=1666699928473') format('woff'),
  14.        url('//at.alicdn.com/t/c/font_3729000_n4lju3ux24b.ttf?t=1666699928473') format('truetype');
  15. }
  16. .iconfont.unicode{
  17.     font-family: iconfont;
  18.     font-size: xx-large;
  19.     cursor: pointer;
  20.     color: red;
  21. }
  22. .iconfont .icon-zhuce{
  23.     font-size: xx-large;
  24.     color: blue;
  25.     cursor: pointer;
  26. }
  27.     </style>
  28. <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3729000_n4lju3ux24b.css">
  29. </head>
  30. <body>
  31.     <!-- unicode -->
  32.   <div class="iconfont unicode">
  33.     <span>&#xe63e;</span>
  34.   </div>
  35.   <hr>
  36.   <!-- class类 -->
  37. <div class="iconfont">
  38.     <span class="icon-zhuce"></span>
  39. </div>
  40. <hr>
  41. <style>
  42.     html{
  43.         font-size: 10px;
  44.     }
  45.     .btn.small{
  46.     font-size: 1rem;
  47.      }
  48.      .btn.middle{
  49.         font-size: 2rem;
  50.      }
  51.      .btn.large{
  52.         font-size: 3rem;
  53.      }
  54.      /* 判断最小值，并且从小到大进行判断.如果是判断最大值，就应该从大到小写 */
  55.      /* 我这边写的是移动端 故从小到大进行判断 */
  56.      /* 当最大的宽度是374px时 1rem=12px */
  57.      @media (max-width:374px) {
  58.         html{
  59.             font-size: 12px;
  60.         }
  61.      }
  62.      /* 当最大的宽度是414px 最下宽度是375时 1rem=14px */
  63.      @media (min-width:375px) and (max-width:414px) {
  64.         html{
  65.             font-size: 14px;
  66.         }
  67.      }
  68.      /* 当最小的宽度是415px时 1rem=16px */
  69.      @media (min-width:415px) {
  70.         html{
  71.             font-size: 16px;
  72.         }
  73.      }
  74. </style>
  75. <button class="btn small">按钮1</button>
  76. <button class="btn middle">按钮2</button>
  77. <button class="btn large">按钮3</button>
  78. </body>
  79. </html>

代码展示如下

  1. 随着屏幕宽度的变大,而进行的rem的值的改变,从而影响元素大小

1rem=12px
1rem=14px
1rem=16px

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