为什么只有我的大型媒体查询有效？答案

【问题标题】：Why are only my large media queries working?为什么只有我的大型媒体查询有效？
【发布时间】：2015-11-05 00:41:49
【问题描述】：

我一直在添加媒体查询以使我的网站更具响应性。较大的查询（最小宽度 1536 像素和最小宽度 1224 像素）工作正常。但是，当我将样式应用于较小的尺寸时，根本没有任何样式出现。我不明白为什么他们不会，我知道如果不调整大小和位置可能无法解决某些问题，但颜色不起作用，这让我相信我对 @media 部分本身做错了。

http://www.codeply.com/go/z6EPsEzrOx

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Header */

header .img-responsive {
    padding-top: 2%;
    margin-left: auto;
    margin-right: auto;
}


/* Body */
#top {
    background-color: #FA7862;
    width: 100%;
    height: auto;
}

#top h1, h2 {
    text-align: center;
    color: rgb(255, 255, 255);
}

#top h1 {
    font-size: 22px;
    font-family: "Comic Sans MS", cursive, sans-serif;
    margin-top: 2.5%;
}

#top h2 {
    font-size: 18px;
    margin-top: 1%;
}

#top hr {
    line-height: 1em;
}

.info {
    position: relative;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 2.5%;
    font-size: 16px;
    color: black;
    font-family: "Lucida Console", Monaco, monospace;
    background-color: white;
    padding: 1% 2% 1% 2%;
    text-align: justify;
    border: solid grey 2px;
}

.connect {
    margin-left: 5%;
    color: white;
    width: 100;
    display: inline-block;
    padding-top: 5%;
    text-align: center;
    margin-bottom: 2.5%;
}

.connect p {
    margin-top: 5%;
    font-size: 16px;
}

.create {
    color: white;
    width: 100;
    display: inline-block;
    text-align: center;
    margin-left: 12%;
}

.create p {
    margin-top: 7.5%;
    font-size: 16px;
}

.publish {
    color: white;
    width: 100;
    display: inline-block;
    text-align: center;
    margin-left: 12%;
}

.publish p {
    margin-top: 7.5%;
    font-size: 16px;
}

/* Bottom */

body {
    background-color: rgb(242, 242, 242);
}

#bottom h1 {
    font-size: 18px;
    font-family: "MS Sans Serif";
    color: black;
    text-align: center;
    position: relative;
}

#mce-EMAIL
{
    font-size: 20px;
    font-family: "MS Sans Serif";
    color: rgb(153, 153, 153);
    text-align: center;
    float: left;
    width: 70%;
    height: 40px;
}
input.button
{
    font-size: 18px;
    font-family: "MS Sans Serif";
    background-color: #fa7862;
    color: rgb(255, 255, 255);
    border: none;
    text-align: center;
    width: 30%;
    height: 40px;
    float: right;
}

#mc_embed_signup
{
    background-color: rgb(255, 255, 255);
    position: relative;
    display: block;
    left: 37.5%;
    width: 30%;
    height: 40px;
}


/* Footer */

footer {
    text-align: center;
    position: relative;
    margin-top: 2%;
}
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Header */

header .img-responsive {
    padding-top: 2%;
    margin-left: auto;
    margin-right: auto;
}


/* Body */
#top {
    background-color: #FA7862;
    width: 100%;
    height: auto;
}

#top h1, h2 {
    text-align: center;
    color: rgb(255, 255, 255);
}

#top h1 {
    font-size: 22px;
    font-family: "Comic Sans MS", cursive, sans-serif;
    margin-top: 2.5%;
}

#top h2 {
    font-size: 18px;
    margin-top: 1%;
}

#top hr {
    line-height: 1em;
}

.info {
    position: relative;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 2.5%;
    font-size: 16px;
    color: black;
    font-family: "Lucida Console", Monaco, monospace;
    background-color: white;
    padding: 1% 2% 1% 2%;
    text-align: justify;
    border: solid grey 2px;
}

.connect {
    margin-left: 5%;
    color: white;
    width: 100;
    display: inline-block;
    padding-top: 5%;
    text-align: center;
    margin-bottom: 2.5%;
}

.connect p {
    margin-top: 5%;
    font-size: 16px;
}

.create {
    color: white;
    width: 100;
    display: inline-block;
    text-align: center;
    margin-left: 12%;
}

.create p {
    margin-top: 7.5%;
    font-size: 16px;
}

.publish {
    color: white;
    width: 100;
    display: inline-block;
    text-align: center;
    margin-left: 12%;
}

.publish p {
    margin-top: 7.5%;
    font-size: 16px;
}

/* Bottom */

body {
    background-color: rgb(242, 242, 242);
}

#bottom h1 {
    font-size: 18px;
    font-family: "MS Sans Serif";
    color: black;
    text-align: center;
    position: relative;
}

#mce-EMAIL
{
    font-size: 20px;
    font-family: "MS Sans Serif";
    color: rgb(153, 153, 153);
    text-align: center;
    float: left;
    width: 70%;
    height: 40px;
}
input.button
{
    font-size: 18px;
    font-family: "MS Sans Serif";
    background-color: #fa7862;
    color: rgb(255, 255, 255);
    border: none;
    text-align: center;
    width: 30%;
    height: 40px;
    float: right;
}

#mc_embed_signup
{
    background-color: rgb(255, 255, 255);
    position: relative;
    display: block;
    left: 37.5%;
    width: 30%;
    height: 40px;
}


/* Footer */

footer {
    text-align: center;
    position: relative;
    margin-top: 2%;
}
}

【问题讨论】：

每个样式都设置了最小宽度，所以宽度太小就没有样式了。
是的，但如果我将屏幕大小调整为 1000 像素，我仍然没有得到任何样式。但在 1300 时，它拥有所有样式。
您还没有为小型设备定义媒体查询。您的最小宽度为 768 像素。小于 768px 的设备没有媒体查询功能
您在媒体查询中使用的是设备宽度，而不仅仅是最大宽度或最小宽度。 iPhone 6 的设备宽度据说超过了您可能正在测试的任何外接显示器的设备宽度。

标签： css responsive-design media-queries

【解决方案1】：

使用min-width 和max-width 代替min-device-width 和max-device-width。

【讨论】：

设备宽度： 描述输出设备的宽度（指整个屏幕或页面，而不仅仅是呈现区域，如文档窗口）。 宽度：宽度媒体特性描述了输出设备的渲染表面的宽度（例如文档窗口的宽度，或者打印机上页面框的宽度）。

【解决方案2】：

解决此问题的一种方法是为更大的屏幕尺寸编写样式，然后使用媒体查询来调整它以用于更小的屏幕。正如您的代码所示，1024 和 1224 之间存在差距。所以我建议您首先在媒体查询之外的 1224 处设计您的页面。然后对 1024 使用媒体查询，对 768 使用第二个。之后您可能还需要定位更小的尺寸。将每个依次较小的尺寸放在另一个下方，并使用 min-width:

//css code for large screen
//then:

@media screen and (min-width:1024px){//styles}

@media screen and (min-width:768px) {//styles}

@media screen and (min-width:400px) {//styles}

【讨论】：