Question

我希望有一个适合打印和适当宽度的屏幕的样式表。

我希望在输入时我的意图很明显：

@media print or (screen and (min-width: 801px)) {
    Rules here
}

可悲的是，这不起作用。

正确的语法是什么？

Answer 1

试试这个：

@media print, (min-width: 801px) {
    Rules here
}

那将是OR。

仅供参考，AND结构将如下所示：

@media print and (min-width: 801px) {
    Rules here
}

Answer 2

试试这个（逗号分隔几个独立的condtions / query）：

@media print, screen and (min-width: 801px) {
    Rules here
}

Answer 3

@media print, screen and (min-width: 801px) {
    .intro_text{
        border: solid 1px blue;
     }
}

适用于Mac（Safari，Chrome和Firefox）。请注意逗号和较少的括号：

2.1 Combining Media Queries

“可以将多个媒体查询组合成以逗号分隔的媒体查询列表。”

我想，给定：

2.4. Media Features

媒体功能总是包含在括号中，并与和/或关键字结合使用，如（颜色）和（最小宽度：600px），而不是用分号分隔。

2.5. Combining Media Features

“媒体条件可以通过将它们包装在括号（）中进行分组，然后可以将它们嵌套在与单个媒体查询相同的条件中。”

混合和和/或不在媒体查询的同一“级别”无效。例如，（颜色）和（指针）或（悬停）是非法的，因为它不清楚是什么意思。相反，括号可用于使用特定的连接关键字对事物进行分组，从而产生（颜色）和（（指针）或（悬停））或（（颜色）和（指针））或（悬停）。这两个具有非常不同的含义：如果仅（悬停）为真，则第一个计算结果为false，但第二个计算结果为真。

有些括号可以使用，但我找不到一个。这必须归因于“媒体查询”和“媒体功能”之间的差异。对于我来说，规范语言似乎有点不清楚，例如：上面提到“分号”。

使用最小宽度为打印和屏幕构建媒体查询

3 个答案: