我使用CSS媒体查询有多个断点。我的问题出在320px的媒体查询中。将视口设置为320px时，不会加载对320px的媒体查询。加载了640px的媒体查询，而不是320px的查询。为什么？
我的html：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0">
<meta name="description" content="Web Design, Search Engine Optimization (SEO), Motion Graphics, Video Editing, Print, and Branding. - arisendesigns.com">
<meta name="keywords" content="Websites, Web Design, Web Developement, Interactive Design, Search Engine Optimization, SEO, Motion Graphics, Video Editing, Graphic Design, Print, Branding, Logo">
<title>Web Design, Search Engine Optimization (SEO), Motion Graphics, Video Editing, Print, and Branding. - arisendesigns.com</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/grid.css">
<link href='http://fonts.googleapis.com/css?family=Rajdhani:400,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/mediaQueries.css">
</head>
<body>
<section class="container clearfix">
<section id="navBar" class="grid_12">
</section>
<header id="banner" class="grid_12">
<div class="container headlineContainer">
<h1>
<p><strong>Creative</strong></p>
<p><strong>Graphic • Web • Motion</strong></p>
<p><strong>Designs</strong></p>
</h1>
</div>
<div class="container arrowContainer">
<div id="arrow">
<img src="img/arrow.png" alt="Scroll Down">
</div>
</div>
</header>
<section class="stretch grid_12"></section>
<footer id="footer" class="grid_12">
</footer>
</section>
<script type="text/javascript" src="jscript/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jscript/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="jscript/jquery.fittext.js"></script>
<script type="text/javascript">
jQuery("h1, h2, h3, p").fitText(2)
</script>
</body>
</html>
我的CSS：
/******* Global Styles ******************************************/
body {
font-family: 'Rajdhani', sans-serif;
color: #333;
font-size: 50px;
font-weight: 400;
}
img {
max-width: 100%;
}
/******* Typography Styles *************************************/
strong {
color: #fff;
font-weight: 500;
}
span #bold {
font-weight: 700;
}
h2 {
color: #333;
}
/******* Header Styles *********************************************/
#banner {
background: #333 url('bg/banner.png') no-repeat right top;
background-size: cover;
height: 600px;
}
.headlineContainer {
height: 40%;
float: left;
padding-top: 12.5%;
font-size: .6em;
}
.headlineContainer h1 {
line-height: 0em;
text-align: center;
}
.arrowContainer {
float: left;
height: 10%;
padding-top: 10%;
}
#arrow {
height: 100%;
width: 7%;
margin: auto;
}
/******* test styles ***************************************/
.stretch {
height: 2000px;
}
我的媒体查询：
/******* Tablet Landscape *************************************/
@media(max-width: 1024px) {
#banner {
height: 400px;
}
.headlineContainer {
padding-top: 15%;
}
.arrowContainer {
padding-top: 9%;
}
}
/******* Tablet Portrait *******************************/
@media(max-width: 768px) {
#banner {
height: 300px;
}
.headlineContainer {
padding-top: 13.5%;
}
.arrowContainer {
padding-top: 7%;
}
}
/******* Phone Landscape **********************************************/
@media(max-width: 480px) {
.headlineContainer {
padding-top: 12%;
}
.arrowContainer {
padding-top: 2%;
}
}
/******* Phone Portrait ********************************/
@media(max-width: 320px) {
.headlineContainer {
padding-top: 22%;
}
.arrowContainer {
padding-top: 0;
}
}
/******* Odd Breakpoints **************************/
@media(max-width: 1200px) {
#banner {
height: 500px;
}
.headlineContainer {
padding-top: 11.5%;
}
.arrowContainer {
padding-top: 9%;
}
}
@media(max-width: 896px) {
#banner {
height: 350px;
}
.headlineContainer {
padding-top: 10.5%;
}
.arrowContainer {
padding-top: 7%;
}
}
@media(max-width: 640px) {
#banner {
height: 200px;
}
.headlineContainer {
padding-top: 6.5%;
}
.arrowContainer {
padding-top: 4%;
}
}
@media(max-width: 640px)适用于所有尺寸640px及以下尺寸，因此此媒体查询中指定的样式也将应用于的屏幕宽度320px。媒体查询不会增加其中CSS规则的特异性。由于您的@media(max-width: 640px)媒体查询在之后@media(max-width: 320px)，因此较大媒体查询中的规则或同等特异性将覆盖较小媒体查询中的规则或同等特异性。
最简单的解决方法是将您的媒体查询从最大的屏幕尺寸排列到最小的尺寸。
如果您需要更多控制权，可以使用min-width和组合将媒体查询限制在一定范围内的屏幕max-width。
@media (min-width:320px) and (max-width: 640px) {
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句