search

博客列表 >icon图标引入和css自适应终端

icon图标引入和css自适应终端

进
进原创
2022年07月11日 19:48:32542浏览

icon图标引入和css自适应终端

html代码

  1. <body>
  2.     <div>
  3.         <span class="iconfont icon-all all"></span>
  4.         <span class="iconfont icon-pay-jingdong jingdong"></span>
  5.         <span class="iconfont icon-rising rising"></span>
  6.     </div>
  7. </body>

css代码

  1. @import 'icon/iconfont.css';
  3. .jingdong{
  4.        color: red;
  5.        font-size: 2rem;
  7. }
  8. .all{
  9.        color: blue;
  10.        font-size: 2rem;
  12. }
  13. .rising{
  14.        color: green;
  15.        font-size: 2rem;
  17. }

效果截图演示

image-20220711194145748

css自适应屏幕宽度从大到小

html代码

  1. <body>
  2.     <div>
  3.         <span class="iconfont icon-all all">1</span>
  4.         <span class="iconfont icon-pay-jingdong jingdong">2</span>
  5.         <span class="iconfont icon-rising rising">3</span>
  6.     </div>
  7. </body>

css代码

  1. @import 'icon/iconfont.css';
  2. html {
  3.        font-size: 16px;
  4. }
  5. .jingdong{
  6.        color: red;
  7.        font-size: 2rem;
  9. }
  10. .all{
  11.        color: blue;
  12.        font-size: 2rem;
  14. }
  15. .rising{
  16.        color: green;
  17.        font-size: 2rem;
  19. }
  20. @media (min-width:1001px) and (max-width:9999px) {
  21.        html {
  22.               font-size: 99px;
  23.        }
  24. }
  25. @media (max-width:1000px) {
  26.        html {
  27.               font-size: 90px;
  28.        }
  29. }
  30. @media (max-width:800px) {
  31.        html {
  32.               font-size: 63px;
  33.        }
  34. }
  35. @media (max-width:600px) {
  36.        html {
  37.               font-size:54px ;
  38.        }
  39. }
  40. @media (max-width:450px) {
  41.        html {
  42.               font-size: 45px;
  43.        }
  44. }
  45. @media (max-width:350px) {
  46.        html {
  47.               font-size: 27px;
  48.        }
  49. }

效果截图演示

1000px宽

image-20220711194532946

800px宽

image-20220711194557698

600px宽

image-20220711194624310

450px宽

image-20220711194648597

350px宽

image-20220711194716033

上一条：网站定位元素的使用场景与演示下一条：MVC初学
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多