Jquery学习第四天

响应式布局

px % vh vw rem em

固定像素：px

width: 500px;
height: 300px;

相对于父级百分比：%

width: 80%;

vh:可视区域高度  vw：可视区域宽度

width: 100vw;
height: 100vh;

rem 根元素

width: 100rem;
height: 10rem;

媒体查询  @media 设备  and (区间){} min-width:1200px   可视区域大于1200px max-width:1200px   可视区域小于1200px

        @media screen and (min-width:1200px){
            .box{
                width: 80%;
            }
            .box1{
                width: 100%;
            }
        }
        @media screen and (max-width:800px){
            .box{
                width: 100%;
            }
            .box1{
                width: 100px;
            }
        }

设备

all  所有设备

screen  移动设备 手机 平板  电脑 笔记本

speech  阅读器

print  打印机

width/height

device-width/device-height  设备宽高

orientation-width/orientation-height  屏幕：横屏/竖屏

栅格系统

ui 框架 栅格系统：将一个盒子平均分成几等分   bootstrap

封装了大量的class名  直接引用可以改变样式

封装了大量的虚拟节点，直接使用封装后的标签

偏移量：  

offset：margin-left 占页面空间

push：left  pull:right  相当于自身定位

嵌套

    
        
            aa
            
                11
                22
                33
                44
                55
                66