博主信息
博文 21
粉丝 0
评论 0
访问量 14333
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
字体图标的引用+媒体查询
P粉116103988
原创
650人浏览过

字体图标的引用

  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="./font_icon/iconfont.css">
  9. </head>
  10. <style>
  11. .icon span:first-of-type{
  12. color: red;
  13. }
  14. .icon span:nth-of-type(2){
  15. color:brown;
  16. font-size: 2em;
  17. }
  18. .icon span:last-of-type{
  19. font-size: 3em;
  20. }
  21. </style>
  22. <body>
  23. <div class="icon">
  24. <h1>字体图标</h1>
  25. 第一个京东图标:<span class="iconfont icon-jingdong"></span>
  26. <br>
  27. 第二个京东图标:<span class="iconfont icon-jingdong1"></span>
  28. <br>
  29. 第三个京东图标:<span class="iconfont icon-jingdong"></span>
  30. </div>
  31. </body>
  32. </html>

效果图如下:

媒体查询

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>Document</title>
  8. </head>
  9. <style>
  10. *{
  11. margin: 0;
  12. padding: 0;
  13. box-sizing: border-box;
  14. }
  15. html{
  16. font-size: 10px;
  17. }
  18. button{
  19. background-color: blue;
  20. color: aliceblue;
  21. border: none;
  22. }
  23. button:hover{
  24. background: red;
  25. cursor: pointer;
  26. }
  27. .text1{
  28. font-size: 1.5rem;
  29. }
  30. .text2{
  31. font-size:2rem;
  32. }
  33. .text3{
  34. font-size:3rem;
  35. }
  36. @media(min-width:2560px){
  37. html{
  38. font-size: 26px;
  39. }
  40. }
  41. @media(min-width:1920px) and (max-width:2560px){
  42. html{
  43. font-size:24px;
  44. }
  45. }
  46. @media(min-width:1680px) and (max-width:1920px){
  47. html{
  48. font-size:22px;
  49. }
  50. }
  51. @media(min-width:1600px) and (max-width:1680px){
  52. html{
  53. font-size:20px;
  54. }
  55. }
  56. @media(min-width:1440px) and (max-width:1600px){
  57. html{
  58. font-size:18px;
  59. }
  60. }
  61. @media(min-width:1366px) and (max-width:1440px){
  62. html{
  63. font-size:16px;
  64. }
  65. }
  66. @media (min-width: 600px) and (max-width:1366px){
  67. html {
  68. font-size: 16px;
  69. }
  70. }
  71. @media (min-width: 414px) and (max-width:600px) {
  72. html {
  73. font-size: 14px;
  74. }
  75. }
  76. @media (min-width: 375px) and (max-width: 413px) {
  77. html {
  78. font-size: 12px;
  79. }
  80. }
  81. @media (max-width: 374px) {
  82. html {
  83. font-size: 10px;
  84. }
  85. }
  86. </style>
  87. <body>
  88. <button class="text1">bt1</button>
  89. <button class="text2">bt2</button>
  90. <button class="text3">bt3</button>
  91. </body>
  92. </html>

效果图如下:



批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学