使用Bootstrap在Css中进行媒体查询

时间:2016-01-21 18:30:35

标签: css twitter-bootstrap css3 twitter-bootstrap-3

我很难理解为什么每当我加入bootstrap.css时我的媒体查询都无法正常工作。当我不包含bootstrap.css时,媒体查询工作正常,但是一旦我链接,它就会停止响应。这是我的html和css代码。谢谢!!!

 <!DOCTYPE html>
 <html>
 <head>


 <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Exps</title>

<link rel="stylesheet" type="text/css" href="untitled.css">



 <script src="js/jquery-2.2.0.js"></script>

 <script src="js/bootstrap.min.js"></script>



</head>
<body>

<h1>This is awesome that you can have responsive sites</h1>

 </body>
 </html>

----- ------ CSS

 @media (min-width: 1200px) {

body{
    background-color: darkblue;
    font-size: 40px;
   }

  }


  @media (min-width: 992px) and (max-width: 1199px) {

body{
    background-color: green;
    font-size: 30px;
 }

} 


 @media (min-width: 768px) and (max-width: 991px) {

body{
    background-color: lightblue;
    font-size: 20px;
   }

  }


 @media (max-width: 767px) {

body{
    background-color: red;
    font-size: 10px;
    }

   }


@media (max-width: 480px) {

body{
background-color: black;
   }  


   } 

0 个答案:

没有答案