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等媒体类型。阅读更多here，关于媒体查询here。

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

Answer 2

您需要确保提供mediatype作为查询的一部分。这描述了所选的输出，例如可以是屏幕或打印。

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

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

媒体查询的问题

2 个答案: