媒体查询问题

Question

如标题所示，我的CSS似乎遇到了问题，我一生无法弄清楚原因。 一切对我来说看起来都是正确的，所以我决定将其带入堆栈溢出以寻求帮助。 这是我的下面的代码

    header {
  height: 70px;
  width: 100%;
  background: url("../img/header.svg");
  background-size: cover; }

  header #logo {
    float: left;
    display: inline-block;
    margin: 10px 0 0 50px;
    width: 112px;
    height: 50%; }

  header nav {
    float: right;
    margin-right: 50px;
    display: inline-block;
    height: 70px;
    width: 435px; }

    header nav a#pull {
      display: none; }

    header nav ul {
      padding: 0;
      margin: 0 auto;
      width: 600px;
      height: 70px; }

      header nav ul li {
        line-height: 70px;
        margin: 0 15px;
        display: inline;
        list-style: none; }

        header nav ul li a {
          text-decoration: none;
          text-transform: capitalize;
          font-family: Helvetica;
          font-size: 20px;
          color: #ffffff;
          line-height: 35px; }

@media (max-width: 584px) {
  header {
    height: 200px; }

    header #logo {
      display: block; }

    header nav {
      width: 100%;
      height: 80px;
      margin: auto; }

      header nav ul {
        width: 100%;
        display: block;
        height: auto;
        margin: auto; } 
    }

这是我的HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="css/normalize.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <title></title>
</head>
<body>

<Header>
    <img id="logo" src="img/caseywoelfle.svg" alt="Logo"/>
    <nav class="clearfix">
        <ul class="clearfix">
            <li><a href="index.html">home</a></li>
            <li><a href="about.html">about me</a></li>
            <li><a href="portfolio.html">portfolio</a></li>
            <li><a href="contact.html">contact</a></li>
        </ul>
        <a href="#" id="pull">Menu</a>
    </nav>
</Header>

<div id="homepage">

    <div id="banner">
        <img id="bannerLogo" src="img/caseywoelfle.svg" alt=""/>

        <p id="wd">web development</p>

        <a id="fomLink" style="display:block" href="about.html">

            <div id="fom">
                <p>find out more</p>
            </div>
        </a>

</div>

<footer>

</footer>

</body>
</html>

我面临的主要问题是我指定的像素数量没有发生媒体查询。 在某些浏览器中，它发生在之前，而在其他浏览器中，它发生在之后。

Answer 1

您需要添加媒体类型，例如print或screen 。 了解更多在这里，有关媒体查询这里。

@media screen and (max-width: 584px)

Answer 2

您需要确保在查询中提供媒体类型。 这描述了选定的输出，例如可以是屏幕输出或打印输出。

因此，您需要在代码中添加以下内容： @media screen and (max-width: 584px) {

我在这里创建了一个小提琴： http : //jsfiddle.net/2rgxfmak/

媒体查询问题

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-12-29 12:11:36

解决方案2
0 2014-12-29 12:16:08

媒体查询问题

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-12-29 12:11:36

解决方案2 0 2014-12-29 12:16:08

解决方案1
2 已采纳 2014-12-29 12:11:36

解决方案2
0 2014-12-29 12:16:08