代码中的媒体查询答案

【问题标题】：Re media query in code代码中的媒体查询
【发布时间】：2015-06-08 23:35:07
【问题描述】：

我必须将所有代码都放在这里，以便您可以在此代码的上下文中看到我的问题，用于基本网站。我所指的这段代码的一部分是媒体查询，如下所示： @媒体（最大宽度：700px）身体{背景颜色：#fff； } 我已经根据需要对媒体查询进行了一些研究，并且知道在这段代码中，当页面宽度为 700 像素或更少时，它将变成我认为是白色的 #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>

【问题讨论】：

标签： media

【解决方案1】：

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

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

片段

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

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

【讨论】：

【解决方案2】：

看看下面的 JSFiddle：http://jsfiddle.net/ep6mtoa7/（顺便说一句，我在此处插入的媒体查询之后缺少一个 {）

@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 的宽度。元标记部分表示是否应该进行缩放或者是否允许缩放。因此，如果您说您的页面应为 1024 像素宽，手机会将页面放入 1024 像素的视口中，而您不必以用户身份放大/缩小。

在这一点上，我不确定深入研究它是否明智，也许先多学习基础知识，然后再深入。但我喜欢你付出的努力，也喜欢 google 和 read read 尽可能多地阅读博客和 stackoverflow 线程，这是必须做的，会大大提高你的水平！

【讨论】：

嗨，珍妮丝，我的回答是否帮助/解决了您现有的问题？如果是，请将正确的帖子标记为“正确答案”，以便谷歌或搜索类似问题的人立即看到哪个帖子导致答案。