css - 无论屏幕大小如何，基于 em 的最小宽度媒体查询都会覆盖以前的样式

Question

我正在使用 zurb foundation for sites 构建网站，并遇到了这个问题:当我想覆盖平板电脑布局的某些样式时，我也会覆盖移动设备的样式。我不知道我做错了什么。

我的CSS:

.footer {
    background-color: #FF7338;
    }
}

/*
LANDSCAPE PHONE
*/
@media only screen and (min-width: 40em) and (orientation: landscape) {
    .footer {

    }
}

/*
TABLET
*/
@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
    .footer {
        background-color: pink;
    }
}

如果我在 chrome 中检查网站，每部手机(从 320px 开始)和平板电脑(从 768px 开始)的页脚都是粉红色的。

感谢您的帮助。

Answer 1

我构建媒体查询的方式是:

没有针对小屏幕的媒体查询，因为我以移动设备为先构建网站，所以这是默认样式。

然后，我在样式表中使用的媒体查询是:

/* MEDIA QUERIES */  
/* for 768px screens or more */
@media only screen and (min-width: 768px) {
...
}

/* for 1024px screens or more */
@media only screen and (min-width: 1024px) {
...
}

因此我可以为平板电脑和台式机设置样式。我使用像素进行媒体查询设置，但使用 ems 也可以。

总而言之，您需要改变媒体查询的方式。此刻，你们两个太像了。