Xmind鸟瞰图：
简单文字总结：
HTML5+CSS3知识总结：
媒体查询：
1.媒体查询格式：@media 设备类型 and 设备特性
2.screen：设置屏幕
3.max-width(最大宽度),min-width(最小宽度)
4.可以通过媒体查询引入不同的css样式
移动端布局方式：
1.静态布局
2.流失布局
3.自适应布局
4.响应式布局
单位：
1.px 像素单位
2.em 相对单位：相对于父元素的字体大小的倍数
3.rem 相对单位：root 根元素的字体大小
rem可以结合媒体查询做移动端的适配：
/* 结合媒体查询，做移动端适配 */
/* iphone 6/7/8 375px */
@media screen and (min-width:375px) {
html {
font-size: 10px;
}
}
/* iphone 6/7/8 plus 414px */
@media screen and (min-width:414px) {
html {
font-size: 11.04px;
}
}
/* iphone 14 pro max 430px*/
@media screen and (min-width:430px) {
html {
font-size: 11.47px;
}
}
/* iPad Mini 768px */
@media screen and (min-width:768px) {
html {
font-size: 20.48px;
}
}