总结4.22

.a{
    border: solid #000000 1px;
    width: 200px;
    height: 200px;
    background-color: tomato;
}
@media screen and (min-width:600px){
    .a{
        display: none;/*最小宽度600px，600px以上显示大括号内的操作*/
    }
}
.b{
    border: solid #000000 1px;
    width: 300px;
    height: 300px;
    background-color: aqua;
}
@media screen and (max-width:768px){
    .b{
        background-color: beige;
    }
}
@media screen and (max-width:992px){
    .b{
        background-color: blue;
    }
}
@media screen and (max-width:1200px){
    .b{
        background-color: brown;
    }
}
@media screen and (min-width:1200px){
    .b{
        background-color: crimson;
    }
}/*这样就能规定四个宽度区间内元素如何变化，可以用在pc、平板、手机多个终端*/
html文件内必须存在此条<meta name="viewport" content="width=device-width, initial-scale=1.0">
html{
    font-size: 13.33333333vw;/*设计图像素640px时，这里用100/640*100(vw)*/
}
div{
    width: 7.5rem;/*设计图像素/100rem*/
}