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;} }

總結

以上是生活随笔為你收集整理的css -- 两种方法实现流式布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。