Question

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

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%;
}
}

Answer 1

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

Answer 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}

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

2 个答案: