Html 有没有办法让媒体查询选择特定页面？_Html_Css_Responsive Design_Media Queries

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

html css responsive-design

Html 有没有办法让媒体查询选择特定页面？,html,css,responsive-design,media-queries,Html,Css,Responsive Design,Media Queries,我使用单独的CSS文件创建了一个站点，现在我想将它们组合起来。问题是，我不能简单地将所有内容复制/粘贴到一个文件中，因为我的媒体查询有不同的html、h1、h2、h3值有没有一种方法可以让媒体查询指定一个页面，从而只选择主页的html和h1，而不更改联系人页面的html和h1 编辑：这是一个Wordpress自定义模板，因此所有页面将共享相同的标题和html开始标记例如：如何合并这两个文件 index.css： html { font-size: 16px; } h1 {

我使用单独的CSS文件创建了一个站点，现在我想将它们组合起来。问题是，我不能简单地将所有内容复制/粘贴到一个文件中，因为我的媒体查询有不同的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;
    }
}

为特定页面指定一个类，如下所示：

<html class="specific-page">

或：

将此

单独添加到该特定页面

或者作为该特定页面中的

标记

如果主题中尚未使用body类，则可以使用该类：

这将自动为主页、帖子、档案等添加特定类。然后，您可以拥有一组全局使用的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;
    }
}

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

您只需要更具体地使用您的样式。。。使用CSS类（或ID）而不是通用的

html

和

h1

谢谢！但是我忘了提一件事：我正在创建一个Wordpress自定义模板，所以所有页面都将共享相同的标题和内容。有没有其他方法可以不用选择html标签就可以做到这一点？@Calisto您可以在WordPress中提供页面级样式

：）

否则，对于特定页面，只需给出：

document.body.parentNode.classList.add（“特定页面”）LoL.：D
正文！==我知道，但这是WordPress的最佳实践。WordPress已经通过使用使用了糟糕的实践！重要的和混合OO和非OO PHP组件
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;
    }
}