较高分辨率的媒体查询覆盖较低分辨率的媒体查询

Question

我有多个使用 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%;
}

}

Answer 1

@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) {
}