html - 有没有办法让媒体查询选择特定页面?

标签 html css responsive-design media-queries

我使用单独的 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;
    }
}

联系人.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">

在 CSS 中:

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

或者:

  1. 添加这个<link />单独访问该特定页面。
  2. 或作为 <style>在该特定页面中标记。

关于html - 有没有办法让媒体查询选择特定页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41307681/

相关文章:

javascript - Javascript 函数分配给按钮单击的问题

html - 如何在单个 ionic 行中制作可滚动的 ionic 列

html - 如何在 <div> 中定位列表?

javascript - "#button_1"不受 .click() 或 .hover() 的影响

javascript - 图像在使用 JavaScript 更改后没有相同的 CSS 属性

css - 选择除第一个以外的所有 sibling

html - 如何在没有媒体查询的情况下制作响应式网站?

javascript - 响应式设计 - 无法正常工作

当设备宽度小于 400 像素时,HTML/CSS 无法响应地工作

html - 如何将忘记链接放入输入密码框中?