01-order

项目的排列顺序
+ - 数值越大,排列顺序越靠后
auto 默认
弹性盒子里面的子元素可以直接设置宽高

02-设置自定义字体

@font-face {
font-family: 字体名字;
src: 地址1[资源链接, 字体格式], 地址2, 地址3
}
—>

03-响应式布局

@media {}
@media 媒体设备 {}
@media 媒体设备 and (条件) {}
媒体设备
tv
screen 屏幕
speech 发声设备
print 打印机
all 全部 默认
条件
min-width 最小宽度
max-width 最大宽度
width
height
!媒体查询要放到最后面,保证不会被覆盖
<500
500-1000
1000-1200
>1200

04-移动端布局

概念
分辨率
物理像素: 手机的真实尺寸
逻辑像素: 计算机模拟的尺寸
设备像素比 dpr = 物理像素/逻辑像素
ip6 2 750 / 375
设备像素比 ppi
ppi>300 视网膜屏
- 浏览器调试
- ps
- 布局
宽度尽量不要写死,自适应、百分比
先完成大结构
移动端没有版心

两种布局方式
头部固定底部固定 中间滚动
- 弹性盒子的做法
中间的盒子不写高度 flex:1 overflow: auto
html, body {
height: 100%
}
- 定位的做法
头部固定定位 底部固定定位, 中间不写高度,自适应
html, body不写高度由内容撑开