无论屏幕大小如何，基于 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 检查网站，每部手机（从 320 像素开始）和平板电脑（从 768 像素开始）的页脚都是粉红色的。

感谢您的帮助。

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) {
...
}

所以我可以为平板电脑和台式机设置样式。我使用像素进行媒体查询设置，但可以使用 em 代替。

总之，您需要改变进行媒体查询的方式。此刻，你们两个太相似了。