HTML5+CSS3笔记（Xmind格式）：第四天

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;
            }
        }

详细Xmind原文档，在文章顶部自取下载！