简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 1025 - 字体图标/媒体查询/定位布局
Blogger Information
Blog 18
fans 0
comment 0
visits 8344
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
1025 - 字体图标/媒体查询/定位布局
时间在渗透
Original
734 people have browsed it

字体图标

阿里图标: https://www.iconfont.cn
Font Awesome: https://fontawesome.dashgame.com

Unicode 方式

  1. <style>
  2. /* 安装自定义字体 */
  3. @font-face {
  4.     /* 字体名称 */
  5.     font-family: 'iconfont';
  6.     /* 字体文件路径(远程/本地) */
  7.     src: url('iconfont.woff2') format('woff2'),
  8.          url('iconfont.woff') format('woff'),
  9.          url('iconfont.ttf') format('truetype');
  10. }
  11. /* 2. 声明自定义字体图标样式 */
  12. .iconfont {
  13.     /* 1. 必须先声明自定义的字体名称 */
  14.     font-family: 'iconfont' !important;
  15.     /* 2. 可选 , 声明其它字体属性 */
  16.     font-size: 16px;
  17.     font-style: normal;
  18. }
  19. </style>
  21. <div class="icon-list">
  22.     <!-- 复制粘贴unicode代码-->
  23.     <i class="iconfont">&#xe69b;</i>
  24.     <i class="iconfont">&#xe69e;</i>
  25. </div>

Font class 方式

  1. <div class="icon-list">
  2.     <!-- 复制粘贴class名-->
  3.     <i class="iconfont icon-doc"></i>
  4.     <i class="iconfont icon-docx"></i>
  5. </div>

媒体查询

  • 媒体查询的宽度顺序:
    • 移动端: 从小往大写
    • PC端: 反过来写,从大向下写
  1. /* 宽度小于375px, 意思就是不大于375px : 字体大小为12px */
  2. @media (max-width: 374px) {
  3.     html {
  4.         font-size: 12px;
  5.     }
  6. }
  8. /* 宽度小于375px 和 宽度小于415px 之间 字体大小为14px */
  9. @media (min-width: 375px) and (max-width: 414px) {
  10.     html {
  11.         font-size: 14px;
  12.     }
  13. }
  15. /* 宽度大于415px, 也就是比这个宽度很大,不确定更大的是多少,字体大小都用16px */
  16. @media (min-width: 415px) {
  17.     html {
  18.         font-size: 16px;
  19.     }
  20. }

定位布局

  1. 定位三个必知术语: 定位元素, 最初包含块(定位上下文/html), 参照物
    (1). 定位元素: position: relative / absolute / fixed
    (2). 最初包含块: 包含了<html>的不可见的,但可感知的区块,大多场景下与”视口”表现一致,但并不相同
    (3). 参照物: 自身, 祖先定位元素, 最初包含块

  2. 页面坐标系
    (1) 与数学坐标每系不同
    (2) 以左上角为起始点,坐标(0,0)
    (3) 向右, X 变大, 向下, Y 变大
    (4) 页面四个顶点用: top,left,right,bottom表示

  3. 定位类型: 相对, 绝对, 固定, 默认静态
    (1). 相对定位: position: relative
    (2). 绝对定位: position: absolute
    (3). 固定定位: position: fixed
    (4). 静态定位: position: static (浏览器默认,即文档流布局)

  4. 定位元素:
    (1): 定义: 也叫”可定位元素”,即可以在文档流中自定义元素的排列方向
    (2): 属性: position: relative / absolute / fixed,即 非static即可

  5. 定位参照物:
    (1): 相对定位: 相对于”自身在文档流中的位置”
    (2). 绝对定位: 相对于”距离它最近的定位元素的位置”,即常说的”定位父级”,逐级向上直到最初包含块
    (3). 固定定位: 总是相对于”最初包含块”定位

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！