search

博客列表 >图标使用（class）和媒体查询实例演示

图标使用（class）和媒体查询实例演示

手机用户1594223549
手机用户1594223549原创
2022年10月27日 00:49:39628浏览

一.图标使用（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>
上一条：10.26实例演示flex容器与项目常用属性下一条：MarkDown的常用语法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多