6
我正在使用AngularJS和SCSS编码网站。我处于开发的移动阶段，我很快发现（对于这个项目），我需要一种使用@media查询来定位多个断点的方法。所以我通过this SO answer和this CSS Tricks Post找到了SO以及其他多个答案。然后我在测试用例中实现了我找到的解决方案，请参阅下面的测试代码片段。逗号分隔的媒体查询列表不起作用
main {
background-color: grey;
height: 100%;
min-height: 1000px;
@media (max-width: 992px) {
background-color: red
}
@media (max-width: 768px) {
background-color: lightcoral
}
@media (max-width: 992px), (max-width: 992px) and (orientation: landscape) {
background-color: lightgreen;
}
@media (max-width: 768px),
(max-width: 768px) and (orientation: landscape) {
background-color: lightblue;
// Reset the min-height here, because we no longer have the sticky search bar.
min-height: 450px;
}
}
<main>
<h1>Page Title</h1>
<h2>Some Descriptive information</h2>
<div>Content</div>
</main>
但我一直没能得到它的工作。最终，我试图做的是在用户处于平板电脑或手机的横向环境中时应用的样式。但是，我不知道我是否正确地做，或正确使用or运营商。
它不起作用，好吧，第一个语句（例如：(max-width: 992px)）的作品，但第二个不计算为真。根据Mozilla：
逗号分隔列表的行为与逻辑运算符或在媒体查询中使用时相似。当使用逗号分隔的媒体查询列表时，如果任何媒体查询返回true，则会应用样式或样式表。逗号分隔列表中的每个媒体查询都被视为单个查询，并且应用于一个媒体查询的任何运算符都不会影响其他媒体查询。 --- Mozilla Documentation
即使我打破代码为两个独立的媒体查询：
@media (max-width: 992px) {
background-color: lightgreen;
}
@media (max-width: 992px) and (orientation: landscape) {
background-color: lightgreen;
}
它仍然无法正常工作。所以我不知道我是否瞄准了错误的宽度（横向）或者我做错了什么。那里的其他前端开发人员能告诉我为什么我的逗号分隔的媒体查询不起作用吗？
编辑：这里是原生代码SCSS：
main {
background-color: $mono-90;
height: 100%;
min-height: 1000px;
@media screen and (max-width: map_get($grid-breakpoints, 'md')) {
// Reset the min-height here, because we no longer have the sticky search bar.
min-height: 450px;
}
@media
(max-width: map_get($grid-breakpoints, 'lg')),
(max-width: map_get($grid-breakpoints, 'lg')) and (orientation: landscape){
background-color: lightgreen;
}
@media
(max-width: map_get($grid-breakpoints, 'md')),
(max-width: map_get($grid-breakpoints, 'md')) and (orientation: landscape){
background-color: lightblue;
}
@media
(max-width: map_get($grid-breakpoints, 'sm')),
(max-width: map_get($grid-breakpoints, 'sm')) and (orientation: landscape){
background-color: lightcoral;
}
}
编辑：每@Godwin的建议，我简化我的@media查询到这一点：
main {
background-color: $mono-90;
height: 100%;
min-height: 1000px;
@media screen and (max-width: map_get($grid-breakpoints, 'md')) {
// Reset the min-height here, because we no longer have the sticky search bar.
min-height: 450px;
}
@media screen and (max-width: map_get($grid-breakpoints, 'lg')) {
background-color: lightgreen;
}
@media screen and (max-width: map_get($grid-breakpoints, 'md')) {
background-color: lightblue;
}
@media screen and (max-width: map_get($grid-breakpoints, 'sm')) {
background-color: lightcoral;
}
}
然而，它不适用于iPad风景（1024x768）。我不要希望它显示在笔记本电脑上，但做希望它显示在横向位置的iPad上。
逻辑上，这并没有什么意义。你基本上在说“如果A是真的，或者如果A和B是真的，那么做一些事情”。如果方向是横向或纵向，查询将是真实的，为什么它甚至是一个条件？ – Godwin
我的想法是，我想根据设备的方向来定位特定元素。当我忽略方向时，我说“这些风格可以适用于肖像或风景，无所谓。”但是，如前所述，我只想在Landscape上显示某些东西，但已经隐藏在Portrait上。 – mrClean
我的意思是，据我所知，你的陈述等同于'A || （A && B）'可以简化为'A'，在我看来，你的逻辑中有一个错误。就目前而言，无论风景如何，每当宽度大于大断点时，都会应用“浅绿色”背景色。 – Godwin