Question

我必须将所有代码放在这里，以便您可以在此基本网站的代码中查看我的问题。我所指的这部分代码是以下编码的媒体查询： @ media（最大宽度：700px） body {background-color：#fff; } 我已根据需要对媒体查询进行了一些研究，并且知道在这段代码中当页面宽度为700px或更小时，它将成为#fff的颜色，我认为它是白色。但除了教学练习之外，将代码放在这里的目的是什么？如果网页在这样的设备上打开，它是否适合移动电话？我认为不是使用媒体查询，而是在元标记视口描述中建立了适合移动电话等设备的网页宽度。请记住，我是一个新手，刚开始学习一个月前的编码。

<!doctype html>
<html>
     <head>
 <title>Example Domain</title>
 <meta charset="utf-8" />
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <style type="text/css">
 body {
 background-color: #f0f0f2;
 margin: 0;
 padding: 0;
 font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sansserif;

 }
 div {
 width: 600px;
 margin: 5em auto;
 padding: 50px;
 background-color: #fff;
 border-radius: 1em;
 }
 a:link, a:visited {
 color: #38488f;
 text-decoration: none;
 }
 @media (max-width: 700px) 
 body {
 background-color: #fff;
 }
 div {
 width: auto;
 margin: 0 auto;
 border-radius: 0;
 padding: 1em;
 }
 }
 </style>
</head>
<body>
<div>
 <h1>Example Domain</h1>
 <p>This domain is established to be used for illustrative examples in
documents. You may use this
 domain in examples without prior coordination or asking for permission.</p>
 <p><a href="http://www.iana.org/domains/example">More information...    </a></p>
</div>

Answer 1

您的代码似乎缺少媒体查询的括号。我相信它看起来应该像this。当窗口小于700px时，背景为白色。当大于700px时，它是灰色的。尝试重新调整窗口大小，看看我的意思。

@media (max-width: 700px) {
    body {
        background-color: #fff;
    }
    div {
        width: auto;
        margin: 0 auto;
        border-radius: 0;
        padding: 1em;
    }
}

段

＆＃13;

body {
    background-color: #f0f0f2;
    margin: 0;
    padding: 0;
    font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sansserif;
}
div {
    width: 600px;
    margin: 5em auto;
    padding: 50px;
    background-color: #fff;
    border-radius: 1em;
}
a:link, a:visited {
    color: #38488f;
    text-decoration: none;
}
@media (max-width: 700px) {
    body {
        background-color: #fff;
    }
    div {
        width: auto;
        margin: 0 auto;
        border-radius: 0;
        padding: 1em;
    }
}

＆＃13;

<div>
     <h1>Example Domain</h1>

    <p>This domain is established to be used for illustrative examples in documents. You may use this domain in examples without prior coordination or asking for permission.</p>
    <p><a href="http://www.iana.org/domains/example">More information...    </a>

    </p>
</div>

＆＃13;

Answer 2

请看下面的JSFiddle：http://jsfiddle.net/ep6mtoa7/（顺便说一句，在我插入的媒体查询之后丢失了{/ p>

@media (max-width: 700px) {
 body {
 background-color: #fff;
 }
 div {
 width: auto;
 margin: 0 auto;
 border-radius: 0;
 padding: 1em;
 }
}

如果增加框的宽度，您将看到灰色背景，中间将是带圆边的框。如果减小框的宽度，您将看到灰色背景消失，框也消失，但白色背景保持不变。真正的需要是因为盒子有一个高度，所以只有盒子部分是白色的，其余的（顶部和底部区域）仍然是灰色的。

请看以下JSFiddle：http://jsfiddle.net/ep6mtoa7/1/（我删除了背景颜色：#fff）

你会看到底部仍然是灰色的。如果你放入背景色部分，它将是白色的。

对于您的另一个问题：媒体查询会查找设备宽度，因此大多数设备的宽度都比您的PC宽。元标记部分表示如果缩放应该启动或者甚至是否允许它。因此，如果您说您的页面宽度应为1024px，则手机会将页面放入1024px视口中，您不必像用户那样放大/缩小。

此时我不确定是否明智地深入研究它，可能先了解更多基础知识然后再深入研究。但我喜欢你投入的努力，也谷歌阅读阅读阅读尽可能多的博客和stackoverflow线程，这是必须做的，将改善你很多！

代码

2 个答案:

段