有没有办法让媒体查询选择特定页面？答案

【问题标题】：Is there a way to make media queries select a specific page?有没有办法让媒体查询选择特定页面？
【发布时间】：2017-05-09 12:39:41
【问题描述】：

我使用单独的 CSS 文件创建了一个网站，现在我想将它们组合起来。问题是我不能简单地将所有内容复制/粘贴到 1 个文件中，因为我的媒体查询对 html、h1、h2、h3 有不同的值。

有没有办法让媒体查询指定一个页面，让它只选择主页的html和h1，而不改变联系页面的html和h1？

编辑：这是用于 Wordpress 自定义模板，因此所有页面将共享相同的标题和 html 开始标记。

例子：

如何合并这两个文件？

index.css：

html {
    font-size: 16px;
}

h1 {
    font-size: 1.5rem;
}

@media only screen and (min-device-width: 700px) {
    html {
        font-size: 17px;
    }
    h1 {
        font-size: 2rem;
    }
}

contact.css：

html {
    font-size: 18px;
}

h1 {
    font-size: 1rem;
}

@media only screen and (min-device-width: 700px) {
    html {
        font-size: 19px;
    }
    h1 {
        font-size: 1.5rem;
    }
}

【问题讨论】：

您只需要更具体的样式...使用 CSS 类 developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors（或 ids）而不是通用的 html和 h1

标签： html css responsive-design media-queries

【解决方案1】：

像这样为那个特定页面指定一个类：

<html class="specific-page">

在 CSS 中：

@media only screen and (min-device-width: 700px) {
    html.specific-page {
        font-size: 19px;
    }
    .specific-page h1 {
        font-size: 1.5rem;
    }
}

或者：

将此<link /> 单独添加到该特定页面。
或作为该特定页面中的<style> 标记。

【讨论】：

谢谢！但我忘了提一点：我正在创建一个 Wordpress 自定义模板，所以所有页面都将共享相同的标题和。有没有其他方法可以在不选择 html 标签的情况下做到这一点？
@Calisto 您可以在 WordPress 中提供页面级样式。 :) 否则，对于特定页面，只需提供：document.body.parentNode.classList.add("specific-page"); LoL。 :D

【解决方案2】：

如果您的主题中尚未使用 body 类，您可以使用它： https://developer.wordpress.org/reference/functions/body_class/

这将自动为主页、帖子、档案等添加特定的类。然后您可以拥有一组全局使用的 CSS 规则，然后您可以定义其他页面的所有特定样式。

body {
    font-size: 16px;
}
h1 {
    font-size: 1.5rem;
}

body.class-name {
    font-size: 18px;
}
h1.class-name {
    font-size: 1rem;
}

@media only screen and (min-device-width: 700px) {
    body {
        font-size: 17px;
    }
    h1 {
        font-size: 2rem;
    }

    html.class-name {
        font-size: 19px;
    }
    h1.class-name {
        font-size: 1.5rem;
    }
}

【讨论】：

body !== html
我知道，但这是 WordPress 的最佳实践。 css-tricks.com/why-use-classes-or-ids-on-the-html-element/…
WordPress 已经通过使用 !important 并混合 OO 和非 OO PHP 组件来使用不良做法。 ;)

【解决方案3】：

大多数 WordPress 页面都有一个类似 -> .page-id-12345 的类 - 其中 12345 是该页面唯一的并且不会更改。页面不包含这个非常独特的类，但将（或应该）定义一个可以唯一标识它的类，例如地理目录搜索结果页面有一个名为“.search-results”的顶级类。

【讨论】：