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

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

1 个答案: