Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 图标使用（class）和媒体查询实例演示
Blogger Information
Blog 28
fans 0
comment 0
visits 13052
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
图标使用（class）和媒体查询实例演示
手机用户1594223549
Original
629 people have browsed it

一.图标使用（class）

1.成果输出

2.代码部分

  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>字体图标</title>
  8.     <!-- Class -->
  9.     <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3731673_a1qsilac6p.css">
  10.     <style>
  11.         .iconfont.class{
  12.             font-size: x-large;
  13.             color: green;
  14.             text-shadow: 1px 1px 1px #888;
  15.         }
  16.         .iconfont.class:hover{
  17.             color: red;
  18.             cursor: pointer;
  19.             transition: color 0.6s linear;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <!-- 1.class -->
  25.     <div class="iconfont class">
  26.         <div class="icon-zhuce"></div>
  27.         <div class="icon-denglu"></div>
  28.     </div>
  30.     <hr />
  31. </body>
  32. </html>

二.媒体查询

1.成果输出

2.代码部分

  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>媒体查询</title>
  8. </head>
  9. <body>
  10.     <!-- 1.媒体查询的原理 -->
  11.     <!-- 媒体： 屏幕, 手机, 打印机
  12.     查询: 查询媒体宽度来确定元素展示方式 
  13.     布局不能在一个无限空间进行,宽,高必须限定一个
  14.     默认限定宽高,而高度随内容不断增长 -->
  15.     <button class="btn small">查询1</button>
  16.     <button class="btn middle">查询2</button>
  17.     <button class="btn large">查询3</button>
  19.     <style>
  20.         html{
  21.             /* 1rem=10px */
  22.             font-size: 10px;
  23.         }
  25.         .btn{
  26.             background-color: green;
  27.             color: red;
  28.             border: none;
  29.             outline: none;
  30.         }
  31.         .btn:hover{
  32.             cursor: pointer;
  33.             opacity: 0.5;
  34.             transition: color 0.3s linear;
  35.         }
  37.         /* 查询1 */
  38.         .btn.small{
  39.             font-size: 1.4rem;
  40.         }
  41.         /* 查询2 */
  42.         .btn.middle{
  43.             font-size: 1.8rem;
  44.         }
  45.         /* 查询3 */
  46.         .btn.large{
  47.             font-size: 2.2rem;
  48.         }
  50.       /* 2.媒体查询的顺序 */
  51.       /* 移动端: 从小往大写 */ 
  52.       /* PC端: 反过来写,从大向下写  */
  54.          /* < 375px , 1rem = 12px  */
  55.       /* 小于375px,意思就是不大于375px  */
  56.       @media (max-width: 374px) {
  57.         html {
  58.           font-size: 12px;
  59.         }
  60.       }
  62.       /* 375px - 415px : 1rem = 14px */
  63.       @media (min-width: 375px) and (max-width: 414px) {
  64.         html {
  65.           font-size: 14px;
  66.         }
  67.       }
  69.       /* > 415px : 1rem = 16px  */
  70.       @media (min-width: 415px) {
  71.         html {
  72.           font-size: 16px;
  73.         }
  74.       }
  75.     </style>
  76. </body>
  77. </html>
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