简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 字体图标的引用和自定义样式/媒体查询的使用
Blogger Information
Blog 43
fans 4
comment 0
visits 18990
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
字体图标的引用和自定义样式/媒体查询的使用
汇享科技
Original
637 people have browsed it

字体图标的引用和自定义样式

字体图标下载

  • 字体图标引用.

    1. 在上方网站选择好自己需要的图标后进行下载
      l5d7qi0t.png
    2. 在项目中进行导入通常会选择自己新建一个css文件进行引入图标库
      l5d7rx2y.png
    3. 挑选相应图标并获取类名，应用于项目页面
      l5d7usus.png

  • 自定义字体图标样式

    1. 给图标添加一个自定义类名
      l5d7wfuf.png
    2. 在自定义的css文件内进行设置样式，因为是字体图标 样式和设置字体没什么区别
      l5d7ysvv.png

看下效果：
l5d7zyrk.png

附上代码：

  1. <!--HTML部分代码-->
  2. <body>
  3.     <div>
  4.         <span class="iconfont icon-icon-test huiyuan"></span>
  5.         <span class="iconfont icon-icon-test1 huiyuan"></span>
  6.         <span class="iconfont icon-icon-test2 huiyuan"></span>
  7.         <span class="iconfont icon-icon-test3 huiyuan"></span>
  8.     </div>
  9. </body>
  1. /*css部分代码*/
  2. /*引入图标库*/
  3. @import url(../font_icon/iconfont.css);
  4. /*设置图标自定义样式*/
  5. .huiyuan{
  6.     font-size: 50px;
  7.     color: aqua;
  8. }

媒体查询介绍以及使用

媒体查询@media ：使用media可以查询媒体元素的宽高并且可以根据宽高作为限定条件更改某一个元素的值
使用到的属性：max-width min-width
max-width:设置一个最大宽度
min-width:设置一个最小宽度

  • 例如：@media (min-width:1200px){....} 语句的意思是指设置一个最小宽度为1200px当页面宽度大于1200px后会执行{…}更改某一个元素的属性或者操作
    l5d991ix.png
  • 下面是以1200 980 680为边界做的一个简易自适应
  1. <!--HTML部分代码-->
  2.     <div class="box">
  3.         <div class="item1"></div>
  4.         <div class="item2"></div>
  5.         <div class="item3"></div>
  6.     </div>
  1. /*CSS部分代码*/
  2. /*设置根目录字号大小*/
  3. html{
  4.     font-size: 10px;
  5. }
  6. /*设置box盒子为flex布局*/
  7. .box{
  8.     display: flex;
  10. }
  11. /*定义三个盒子的默认样式*/
  12. .item1{
  13.     width: 14rem;
  14.     height: 5rem;
  15.     margin: auto;
  16.     background-color: aqua;
  17. }
  18. .item2{
  19.     width: 24rem;
  20.     height: 10rem;
  21.     margin: auto;
  22.     background-color: aquamarine;
  23. }
  25. .item3{
  26.     width: 34rem;
  27.     height: 15rem;
  28.     margin: auto;
  29.     background-color: blue;
  30. }
  32. /*媒体查询 media   */
  33. /* 
  34. 使用到的属性：max-width min-width
  35. max-width:设置一个最大宽度
  36. min-width:设置一个最小宽度
  37.  */
  38. /*当页面宽度大于等于1200px时将html根元素字号设置为16px*/
  39. @media (min-width:1200px){
  40.     html{
  41.         font-size: 16px;
  42.     }
  43. }
  45. /*当页面处于980px和1199px中间的时候将html根元素字号设置为14px*/
  46. @media (max-width:1199px) and (min-width:980px){
  47.     html{
  48.         font-size: 15px;
  49.     }
  50. }
  52. /*限定最大宽度为480px 当页面宽度小于480px时将会更改html根字号大小为13px*/
  54. @media (max-width:680px)
  55. {
  56.     html{
  57.         font-size: 13px;
  58.     }
  59. }
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！