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。

总之，您需要更改媒体查询的方式。目前，你所拥有的两个人彼此太相似了。

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

1 个答案: