为什么设置媒体查询总是没有任何效果?

来源：5-3 如何实现移动端的样式-如何选择媒体查询单位2

GYA

2017-01-29

请问这是什么问题呢？我检查了很多遍，花了很多时间就是看不出哪里有问题？

写回答

2回答

姜维

2017-02-15

把完整的页面代码贴出来看下？

GYA

提问者

2017-02-15

.footer-content .brand {
    display: block;
    float: left;
    width: 20%;
    height: 35px;
    background: url('../img/logo@1x.png') no-repeat;
    background-size: 150px 35px;
    filter: grayscale(100%);
    /* 灰色滤镜 */
    -webkit-filter: grayscale(100%);
}

.footer-content ul {
    float: left;
    width: 15%;
}

.footer-content ul li {
    font-size: 1.4rem;
    line-height: 2.4rem;
}

.footer-content ul .title {
    font-size: 1.6rem;
    line-height: 3rem;
}

@media screen and (max-width:50em) {
    .footer-content .brand {
        display: none;
    }
    .footer-content ul {
        width: 20%;
    }
    .footer-content ul li {
        font-size: 1.2rem;
        line-height: 2rem;
    }
    .footer-content ul .title {
        font-size: 1.4rem;
        line-height: 2.5rem;
    }
}

我现在明白原因了，就像这段代码，@media媒体查询要写在原来样式下面才会有效，写在上面则无效。

响应式开发一招致胜

用一套代码开发出不受设备型号、尺寸限制的互联网金融网站

4021 学习 · 752 问题

查看课程

相似问题

only 不是很明白

回答 1

body的font-size为什么没有参照根元素 html 去设置font-size，里面的标签好像没有问题

回答 1

关于媒体查询的书写方式

回答 1

我的mata标签在chrome开发者工具里跑到body里面去了，然后媒体查询无效

回答 2

如何去计算rem的值？

回答 3

打开慕课网App查看更多内容