媒体查询
响应式布局:
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文件中