我有一个媒体查询在没有指定宽度作为满足条件的情况下启动，即使在375px处媒体查询从基本CSS接管也是如此。媒体查询应该从660px接管。这是我的index.html页面：
<!DOCTYPE html>
<html>
<head>
<title>Thames Accountants</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header-bg">
<header>
<button id="toggleButton" class="c-hamburger c-hamburger--rot">
<span>toggle menu</span>
</button>
<h1 class="logo">Thames Accountants</h1>
</header>
<p class="clear"></p>
<div class="ta-menu">
<nav>
<ul>
<li>Our Services</li>
<li>About Us</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</div> <!-- end ta-menu div -->
<div class="intro">
<p>Personalised Accounting</p>
<button type="button" class="btn btn-info ta-button">Get In Touch</button>
<div><a href="#services"><span class="glyphicon glyphicon-chevron-down ta-icon"></span></a></div>
</div>
</div> <!-- end header-bg div -->
<div class="container">
<a name="services"></a>
<div id="services" class="services">
<h2 class="services-title">Accountancy Services</h2>
<p class="bullet-points">Annual Accounts <span class="glyphicon glyphicon-ok"></span></p>
<p class="bullet-points">Book-Keeping <span class="glyphicon glyphicon-ok"></p>
<p class="bullet-points">Company Secretarial <span class="glyphicon glyphicon-ok"></p>
<p class="bullet-points">Management Accounts <span class="glyphicon glyphicon-ok"></p>
</div>
<div class="services">
<h2 class="services-title">Added Value Services</h2>
<p class="bullet-points">Business Valuations <span class="glyphicon glyphicon-ok"></span></p>
<p class="bullet-points">Business Plans <span class="glyphicon glyphicon-ok"></p>
<p class="bullet-points">Management Systems <span class="glyphicon glyphicon-ok"></p>
<p class="bullet-points">Strategic Planning <span class="glyphicon glyphicon-ok"></p>
</div>
<div class="services">
<h2 class="services-title">Start-up Services</h2>
<p class="bullet-points">Ready made company <span class="glyphicon glyphicon-ok"></span></p>
<p class="bullet-points">Limited Liability Partnership <span class="glyphicon glyphicon-ok"></p>
<p class="bullet-points">PLC formation <span class="glyphicon glyphicon-ok"></p>
</div>
<div class="services">
<h2 class="services-title">Taxation Services</h2>
<p class="bullet-points">Contractors and IR35 <span class="glyphicon glyphicon-ok"></span></p>
<p class="bullet-points">Payroll, PAYE Returns and RTI <span class="glyphicon glyphicon-ok"></p>
<p class="bullet-points">VAT <span class="glyphicon glyphicon-ok"></p>
</div> <!-- end services div -->
</div> <!-- end container div -->
<div class="testimonials">
<h1 class="testimonial-title">Testimonials</h1>
<div class="ta-container">
<blockquote><p class="ta-review">Thames Accountants changes lives. Thanks for NOT being another overpaid below average bookkeeper but a true personalised accounting department for our company. - S. Johnson</p></blockquote>
<blockquote><p class="ta-review">Thames Accountants changes lives. Thanks for NOT being another overpaid below average bookkeeper but a true personalised accounting department for our company. - S. Johnson</p></blockquote>
<blockquote><p class="ta-review">Thames Accountants changes lives. Thanks for NOT being another overpaid below average bookkeeper but a true personalised accounting department for our company. - S. Johnson</p></blockquote>
</div>
</div>
<footer>
<div class="row ta-row">
<div class="col-md-4 ta-about">
<h4>About TA</h4>
<p>We are an experienced accounting agency based in South East, London, UK. We work closely with our clients and act for a broad range of business and personal clients.</p>
</div>
<div class="col-md-4 ta-social">
<h4>Social</h4>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
<div class="col-md-4 ta-pages">
<h4>Menu</h4>
<ul>
<li>Our Services</li>
<li>About Us</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
</div> <!-- end row div -->
<div class="row ta-policies">
<div class="ta-center">
<div class="col-md-12">
<ul>
<li>Privacy Policy</li>
<li>Site terms</li>
</ul>
</div>
</div>
</div>
</footer>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
这是我的CSS媒体查询
Media queries for wider screens
**********************************/
@media (min-width: 660px) {
/*Parallax image for home page*/
.header-bg {
background: radial-gradient(#252625, transparent 150%), url('./img/tower-bridge.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center center;
height: 600px;
width: 100%;
}
.logo {
font-size: 2em;
margin: 3% 0 0 5%;
text-align: left;
}
.intro p {
font-size: 1.5em;
margin-top: 10%;
}
.ta-button {
font-size: 0.6em;
padding: 5px;
border-radius: 5px;
}
.services-title {
font-size: 1.5em;
}
.ta-menu {
font-size: 1.5em;
}
.testimonial-title {
font-size: 1.75em;
}
blockquote {
font-size: 1.2em;
border-left: 3px solid #fff;
}
.services p {
font-size: 1em;
}
.ta-icon {
margin-top: 0;
}
.c-hamburger {
display: none;
}
.intro p {
margin-top: 0;
font-size: 1.2em;
border: none;
}
}/*End media query @ 460 px*/