search

博客列表 >引入字体图标和PC优先

引入字体图标和PC优先

P粉036614676
P粉036614676原创
2022年07月10日 08:22:36392浏览

引入字体图标

1.存在的问题，打开index.html发现有些下载的图标用不了

2.引入样式

3.代码

style.css代码

  1. @import './font_icon/iconfont.css';
  3. .picture{
  4.     color: brown;
  5.     border: 2px solid green;
  6.     background-color: aqua;
  7.     width: 2em;
  8. }

demo03.css

  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="style.css"> -->
  9.     <link rel="stylesheet" href="style.css">
  11. <style>
  12. </style>
  13. </head>
  14. <body>
  15.     <div><i class="iconfont icon-aichegujiabeifen7 picture"></i></div>
  16. </body>
  17. </html>

PC优先

1.样式

2.代码

  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=, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         button{
  10.             background-color: aquamarine;
  11.             color: cadetblue;
  12.             border: 1px solid red;
  13.             /* outline: none; */
  14.         }
  15.         html{
  16.             font-size: 30px;
  17.         }
  18.         .small{
  19.             font-size: 1rem;
  20.         }
  21.         .big{
  22.             font-size: 1.5rem;
  23.         }
  24.         .bigest{
  25.             font-size: 2rem;
  26.         }
  27.         @media (min-width:1000px) {
  28.             html{
  29.                 font-size: 30px;
  30.             }
  31.         }
  32.         @media (max-width:1000px) and (min-width:800px) {
  33.             html{
  34.                 font-size: 25px;
  35.             }
  36.         }
  37.         @media (max-width:800px) and (min-width:600px) {
  38.             html{
  39.                 font-size: 20px;
  40.             }
  41.         }
  42.         @media (max-width:600px) and (min-width:450px) {
  43.             html{
  44.                 font-size: 15px;
  45.             }
  46.         }
  47.         @media (max-width:450px) {
  48.             html{
  49.                 font-size: 10px;
  50.             }
  51.         }
  52.     </style>
  53. </head>
  54. <body>
  55.    <!-- 1.移动优先断点： 375, 414, 600 , 由小到大
  56.    2.PC优先断点:  1000, 800 600 450  350 由大到小 -->
  57.    <button class="btn small">small</button>
  58.    <button class="btn big">big</button>
  59.    <button class="btn bigest">bigest</button>
  61. </body>
  62. </html>
上一条：使用class方式引入字体图标和自定义样式以及简单的媒体查询下一条：class方式引入字体图标,以及自定义样式 ，pc端媒体查询的方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多