1025 - 字体图标/媒体查询/定位布局 - 作业

字体图标

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

Unicode 方式

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

Font class 方式

<div class="icon-list">
    <!-- 复制粘贴class名-->
    <i class="iconfont icon-doc"></i>
    <i class="iconfont icon-docx"></i>
</div>

媒体查询

媒体查询的宽度顺序:
- 移动端: 从小往大写
- PC端: 反过来写,从大向下写

/* 宽度小于375px, 意思就是不大于375px : 字体大小为12px */
@media (max-width: 374px) {
    html {
        font-size: 12px;
    }
}
/* 宽度小于375px 和 宽度小于415px 之间 字体大小为14px */
@media (min-width: 375px) and (max-width: 414px) {
    html {
        font-size: 14px;
    }
}
/* 宽度大于415px, 也就是比这个宽度很大,不确定更大的是多少,字体大小都用16px */
@media (min-width: 415px) {
    html {
        font-size: 16px;
    }
}

定位布局

定位三个必知术语: 定位元素, 最初包含块(定位上下文/html), 参照物
(1). 定位元素: position: relative / absolute / fixed
(2). 最初包含块: 包含了<html>的不可见的,但可感知的区块,大多场景下与”视口”表现一致,但并不相同
(3). 参照物: 自身, 祖先定位元素, 最初包含块
页面坐标系
(1) 与数学坐标每系不同
(2) 以左上角为起始点,坐标(0,0)
(3) 向右, X 变大, 向下, Y 变大
(4) 页面四个顶点用: top,left,right,bottom表示
定位类型: 相对, 绝对, 固定, 默认静态
(1). 相对定位: position: relative
(2). 绝对定位: position: absolute
(3). 固定定位: position: fixed
(4). 静态定位: position: static (浏览器默认,即文档流布局)
定位元素:
(1): 定义: 也叫”可定位元素”,即可以在文档流中自定义元素的排列方向
(2): 属性: position: relative / absolute / fixed,即非static即可
定位参照物:
(1): 相对定位: 相对于”自身在文档流中的位置”
(2). 绝对定位: 相对于”距离它最近的定位元素的位置”,即常说的”定位父级”,逐级向上直到最初包含块
(3). 固定定位: 总是相对于”最初包含块”定位

1025 - 字体图标/媒体查询/定位布局

字体图标

Unicode 方式

Font class 方式

媒体查询

定位布局

相关文章