0
点赞
收藏
分享

微信扫一扫

响应式布局原理


<style>
.container {
height: 150px;
background-color: pink;
margin: 0 auto;
}

/* 1. 超小屏幕下 小于 768 布局容器的宽度为 100% */

@media screen and (max-width: 767px) {
.container {
width: 100%;
}
}


/* 2. 小屏幕下 大于等于768 布局容器改为 750px */

@media screen and (min-width: 768px) {
.container {
width: 750px;
}
}



/* 3. 中等屏幕下 大于等于 992px 布局容器修改为 970px */

@media screen and (min-width: 992px) {
.container {
width: 970px;
}
}



/* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */

@media screen and (min-width: 1200px) {
.container {
width: 1170px;
}
}
</style>
</head>


举报

相关推荐

0 条评论