bootstrap-day01
调整宽度
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title></title> 8 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> 9 <style> 10 .container{ 11 background-color: blueviolet; 12 width: 100%; 13 height: 50px; 14 margin: 0 auto; 15 } 16 17 /* 媒体查询，bootstrap里面的方法 */ 18 @media screen and (max-width:768px){ 19 .container{ 20 width: 100%; 21 } 22 } 23 @media screen and (min-width:768px) and (max-width:992px){ 24 .container{ 25 width: 750px; 26 } 27 } 28 @media screen and (min-width:992px) and (max-width:1200px){ 29 .container{ 30 width: 970px; 31 } 32 } 33 @media screen and (min-width:1200px){ 34 .container{ 35 width: 1170px; 36 } 37 } 38 </style> 39 </head> 40 41 <body> 42 43 <div class="container"></div> 44 45 <!-- 这个用原生JS的方法，上面那个用了bootstrap的方法 --> 46 <!-- 47 <script> 48 window.addEventListener("load",function(){ 49 //1.获取常量 50 let container = document.querySelector(".container"); 51 let clientW = 0; 52 //将下面的设置成可以调用函数的形式，然后这里就可以直接调用了 53 resize(); 54 55 //2.监听窗口的大小变化 56 window.addEventListener("resize",resize) 57 58 function resize(){ 59 //2.1获取改变后的宽度 60 clientW = window.innerWidth; 61 console.log(clientW); 62 63 //2.2判断 64 if(clientW >= 1200){ 65 //超大屏幕 66 container.style.width = "1170px"; 67 }else if(clientW >= 992){ 68 //大屏幕 69 container.style.width = "970px"; 70 }else if(clientW >= 768){ 71 //小屏幕 72 container.style.width = "750px"; 73 }else{ 74 //超小屏幕 75 container.style.width = "100%"; 76 } 77 } 78 }) 79 </script> --> 80 81 82 83 <!-- jquery.js要写在bootstrap.js之前 --> 84 <script src="lib/jquery/jquery.js"></script> 85 <script src="lib/bootstrap/js/bootstrap.js"></script> 86 </body> 87 </html>
