媒体查询

媒体查询
响应式布局：
1） pc端
1.类似于腾讯视频
容器的宽度随着屏幕的分辨率大小的改变而改变
2.纯响应式（与mobile兼容）
完全兼容移动设备

2) mobile端
手机型号不同，宽度不同
1.不要给容器【块元素】指定宽度，让它默认为100%
2.子元素【列元素】宽度使用相对单位，百分数

1.使用@media

.products {
    width: 990px;
    margin: 0 auto;
}
.products>ul{
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 100px;
    overflow: hidden;
}
.products > ul > li {
    width: 19.5%;
    height: 100px;
    background-color: rebeccapurple;
    list-style: none;
}
@media screen and (min-width: 1300px) {
    .products {
        width: 1200px;
    }
    .products >ul>li {
        width: 16.5%;
    }
    


    

        

        

        

        

        

        

        

    

2.将不同分辨率的内容写到css文件中，用link引入到html文件中