@media不是在執行css更改

我有一個相對位置的div，並向左漂移。我試圖將其轉移到@media不是在執行css更改

@[email protected] 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 protected]</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;

來源

2014-02-13 Greg

您有@[email protected]

來源

2014-02-13 19:41:27 helion3

此外，如果您的徽標沒有設置寬度，則居中嘗試不起作用。沒有必要在顯示元素時留下餘量none – Huangism

當然是的，它沒有定義一個set。現在的問題是div沒有擴大，所以圖像正在被切斷。有什麼建議麼？ – Greg

什麼應該擴大？我在你的例子中看不到任何關於設置寬度或增加... – helion3

一個錯字嘗試使用

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

我不確定如果@medai是一個錯字或沒有，但上述應能正常工作。

來源

2014-02-13 19:42:32 aschmelyun

@media不是在執行css更改

回答

相關問題