css - @media 没有执行 css 更改

标签 css media-queries

我有一个 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;}
}

它不反射(reflect)浏览器的变化。我是否遗漏了其中一个容器中的某些东西?

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

最佳答案

@medai@media 有错别字

关于css - @media 没有执行 css 更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21763941/

相关文章:

google-chrome - chrome/safari (webkit) 松散的指针交互边界半径

javascript - 如何为每个轮播元素设置间隔持续时间?

html - 如何使div不与父div中的另一个div重叠

css - 我需要为每个宽度范围添加媒体查询吗?

css - @media 查询不适用于 IE11 但适用于 Chrome/FF

html - 避免与响应式绝对定位重叠

javascript - 更改图像 src 时 jQuery 悬停进出淡入淡出过渡

jquery - IE8 :Image disappearing while rotating using jQuery Rotate

html - 按钮与 div 不对齐

html - Div 不会像它们应该的那样折叠 - 媒体查询