search

博客列表 >1. 实例演示使用class方式引入字体图标,以及自定义样式 2. 实例演示媒体查询(PC优先模式)

1. 实例演示使用class方式引入字体图标,以及自定义样式 2. 实例演示媒体查询(PC优先模式)

秋闲独醉
秋闲独醉原创
2022年07月11日 15:54:38347浏览

实例演示使用class方式引入字体图标,以及自定义样式

  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.     <!-- 引入css样式表 -->
  8.     <link rel="stylesheet" href="demo.css" />
  9.     <title>引入字体图标</title>
  10.   </head>
  11.   <body>
  12.     <iframe frameborder="1" name="content"></iframe>
  13.     <div>
  14.       <a href="www.baidu.com" target="content"><span class="iconfont icon-shouye"></span></a>
  15.       <span class="iconfont icon-fenlei"></span>
  16.       <span class="iconfont icon-icon03"></span>
  17.     </div>
  18.   </body>
  19. </html>
  1. /* 引入第三方字体 */
  2. @import url("font_icon/iconfont.css");
  3. * {
  4.   margin: 0;
  5.   padding: 0;
  6. }
  7. html {
  8.   /* 设置根的字体大小 */
  9.   font-size: 10px;
  10. }
  11. div .iconfont {
  12.   /* 3rem,指的是根字体大小的3倍 */
  13.   font-size: 3rem;
  14.   margin: 3rem;
  15. }
  16. div {
  17.   margin: 1rem;
  18. }

字体图标效果图

实例演示媒体查询(PC优先模式)

  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>实例演示媒体查询(PC优先模式)</title>
  8.     <style>
  9.       /* 设置根原素字体大小为5px */
  10.       html {
  11.         font-size: 5px;
  12.       }
  13.       button.btn:hover {
  14.         cursor: pointer;
  15.         opacity: 0.7;
  16.         transition: 0.8s;
  17.       }
  18.       body > button:nth-of-type(1) {
  19.         font-size: 1rem;
  20.       }
  21.       body > button:nth-of-type(2) {
  22.         font-size: 1.5rem;
  23.       }
  24.       body > button:last-of-type {
  25.         font-size: 2rem;
  26.       }
  27.       /* 2. PC优先: 先从最大屏的设备进行适配 */
  29.       /* 1000, 800 600 450  350  */
  30.       @media (min-width: 1000px) {
  31.         html {
  32.           font-size: 25px;
  33.         }
  34.       }
  35.       @media (max-width: 999px) and (min-width: 800px) {
  36.         html {
  37.           font-size: 20px;
  38.         }
  39.       }
  40.       @media (max-width: 799px) and (min-width: 600px) {
  41.         html {
  42.           font-size: 15px;
  43.         }
  44.       }
  45.       @media (max-width: 599px) and (min-width: 450px) {
  46.         html {
  47.           font-size: 10px;
  48.         }
  49.       }
  50.       @media (max-width: 449px) and (min-width: 350px) {
  51.         html {
  52.           font-size: 5px;
  53.         }
  54.       }
  55.     </style>
  56.   </head>
  57.   <body>
  58.     <button class="btn">button1</button>
  59.     <button class="btn">button2</button>
  60.     <button class="btn">button3</button>
  61.   </body>
  62. </html>
上一条：css布局常用单位/表格样式/字体图标及媒体查询下一条：Docker换源与镜像拉取
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多