Question

我有一个相对位置的div并向左浮动。我正试图将其转移到

@medai@media only screen and (max-width : 975px) 
{ #logo { float:none; margin:0 auto; } 
  .main-menu-and-contact-wrap { display:none; margin-left:150px;}
}

它不反映浏览器的变化。我可能在其中一个容器中遗漏了一些东西吗？

<div id="headcontainer">
        <div id="header" class="clearfix">
            <div id="headerTop" class="clearfix">
                <div id="email">Email Us: <a href="#">email@example.com</a></div><!-- End email -->
                <div id="icons">
                    <div class="icons"><img src="images/faceBook_animation.jpg" width="48" height="86" alt="facebook" /></div>
                    <div class="icons"><img src="images/linkedin_animation.jpg" width="48" height="86" alt="linkedin" /></div>
                </div><!-- End icons -->
            </div><!-- End headerTop -->

        <div id="logo"><img src="images/sandpiperLogo.png" width="300" height="100" alt="logo" /></div>
        <div class="main-menu-and-contact-wrap">
            <div id="phoneNumber" class="phone"><p>1-800-222-2522</p>
            <span class="outer-strip" style="right: -607px; width:607px"></span>
            </div><!-- End phoneNumber -->
            <div id="navWrap">
                <nav>
                    <ul id="Navlist">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Register</a></li>
                        <li><a href="#">FloorPlans</a></li>
                        <li><a href="#">SitePlans</a></li>
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </div><!-- End naWrap -->
        </div><!-- End main-menu-and-contact-wrap -->

        </div><!-- End header -->
    </div><!-- End headcontainer -->

#headcontainer {
    max-width: 100%;
    background-color: #252a2b;
}

#header {
    max-width: 1170px;
    margin: 0 auto;
    position: relative;
    color: #000;
    background-color: #252a2b;

}

#headerTop{
    position:relative;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #343a3b;
    float:left;
    width:100%;
    margin-bottom:30px;
    }

#email{
    font-family: Arial, Helvetica, sans-serif;
    line-height: 43px;
    color: #929A94;
    float:left;
    background-image: url(../images/emailBG.jpg);
    background-position: left;
    background-repeat: no-repeat;
    padding-left: 35px;
    width:175px;
    font-size: 12px !important;
    }

#icons{
    position:relative;
    float:right;
    }

.icons{
    display: inline;
    float: right;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #343a3b;
    height:42px;
    width:48px;
    overflow:hidden;
    }

.icons img {
    position: relative;
    top: 0px;
    transition: top .2s ease-in-out;
}
.icons img:hover {
    top: -42px;
}

#logo{
    position:relative;
    float:left;
    }

.clearfix {
  *zoom: 1; }
  .clearfix:before, .clearfix:after {
    display: table;
    content: "";
    line-height: 0; }
  .clearfix:after {
    clear: both; }

/*---------------NAVIGATION MENU----------------*/

.main-menu-and-contact-wrap{
    position:absolute;
    right:0px;
    bottom:0;
    }

#navWrap{
    position:relative;
    float:right;
    margin-top:60px;
    max-width:700px;

Answer 1

您有@medai@media

的拼写错误

Answer 2

尝试使用

@media and (max-width : 975px) 
{ 
   #logo { float:none; margin:0 auto; } 
   .main-menu-and-contact-wrap { display:none; margin-left:150px;}
}

我不确定@medai是否是拼写错误，但上述情况应该正常。

@media没有执行css更改

2 个答案: