Bootstrap裡container的響應式佈局的解釋
阿新 • • 發佈：2018-12-12
之前在用bootstrap的時候,發現其中container設定了響應式佈局,然後根據邏輯自己敲了一遍.
現在移動端越來越火,基本所有的網頁都會根據移動端做一些適配,其中響應式佈局,就是適配中關鍵的一環.其實響應式佈局十分簡單,通過JS原生程式碼,或者是@media,都可以進行響應式佈局,下面我們來試試.
利用原生JS程式碼實現響應式佈局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .container{ height: 30px; background-color: red; margin: 0 auto; } </style> </head> <body> <div class="container"> </div> <!-- 四個檔位 1170 970 750 100% --> <script> window.onload=function () { //1.拿到container標籤 var container = document.querySelector('.container'); windowChange(); //2.監聽視窗發生改變... window.addEventListener('resize',windowChange) function windowChange() { //3.拿到口的寬度 var windowWidth=window.innerWidth; //width + padding if(windowWidth>=1170){ container.style.width=1170+'px'; }else if(windowWidth>=970){ container.style.width=970+'px'; }else if(windowWidth>=750){ container.style.width=750+'px'; }else{ //... container.style.width='100%'; } } } </script> </body> </html>
其實有基礎的朋友看眼程式碼就能理解了,所謂響應式程式碼就是監聽了window的寬度,當寬度改變到一定程度時,佈局相應的進行變化,這就是簡易的響應式佈局.如果認為JS原生程式碼很麻煩?不喜歡敲?可以,我們還可以通過媒體查詢來實現.
媒體查詢實現響應式佈局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .container{ height: 30px; background-color: red; margin: 0 auto; } /*... 750*/ @media (max-width: 750px){ .container{ width: 100%; } } @media (min-width: 750px) and (max-width: 970px){ .container{ width: 750px; } } @media (min-width: 970px) and (max-width: 1170px){ .container{ width: 970px; } } @media (min-width: 1170px) { .container{ width: 1170px; } } </style> </head> <body> <div class="container"> </div> <!-- 四個檔位 1170 970 750 100% --> </body> </html>
@media標籤,其作用就是允許新增表示式用以媒體查詢，以此來選擇不同的樣式表，從而自動適應不同的螢幕解析度。不過該標籤是CSS3的,對於IE老版本(IE9-)的相容性存在問題(為什麼老是要為IE去做相容?),所以大家用的時候注意下.其實媒體查詢的邏輯和之前JS的原生程式碼邏輯相同,所以這裡就不再敘述了
@media其實還有許多的媒體型別,比如@meida all用於所有裝置,@media print用於列印裝置,@media speech應用於螢幕閱讀器等發聲裝置,@media screen 用於電腦螢幕，平板電腦，智慧手機等.
你也可以直接在link裡用來判斷當某個尺寸時,引入某個css
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 768px)">這條程式碼意思是在大於或等於768時使用style.css.
大概的響應式佈局就寫到這了,很淺顯卻又很重要的功能,其實如果真要深入,去各型別做適配,也很麻煩,今天就寫這麼多吧.