Bootstrap将屏幕分为4个等级:
1.超小屏幕 (宽度小于768 px), 显示宽度 100%;
2.小屏幕 (宽度在768px ~ 992px), 显示宽度 750px;
3.中等屏幕 (宽度在992px ~ 1200px), 显示宽度 970px;
4.大屏幕 (宽度大于1200px), 显示宽度 1170px.
js实现:
window.addEventListener("resize", function() {
let clientW = window.innerWidth;
let container = document.querySelector(".container");
if( clientW >= 1200) {
container.style.width = "1170px";
} else if ( clientW >= 992 ) {
container.style.width = "970px";
} else if ( clientW >= 768 ) {
container.style.width = "750px";
} else {
container.style.width = "100%";
}
});
CSS3媒体查询实现:
@media screen and ( max-width: 768px ) {
.container{
width: 100%;
}
}
@media screen and ( min-width: 768px ) and ( max-width: 992px ) {
.container {
width: 750px;
}
}
@media screen and ( min-width: 992 px ) and ( max-width: 1200px ) {
.container {
width: 970px;
}
}
@media screen and ( min-width: 1200px ) {
.container {
width: 1170px;
}
}