是否可以通过媒体查询仅针对我的主页？

Question

是否可以使用媒体查询但限制它只影响我的主页？

我正在设置一个 woo-commerce 商店，在移动设备上查看时，除了主页外，该网站的所有内容看起来都不错。我一直在寻找解决方案，但没有成功。

如果可以，请告诉我我从什么代码开始。非常感谢任何帮助，我对此深有体会。宝拉

Answer 1

当然可以。我认为在 wordpress 中你有 class home 在 body 标签中，如果它是主页的话。因此，在 class 定义中，classes 在哪里，是否在媒体查询中并不重要。

body.home .any-css-selector { styles }

您可能有 css 个文件：

bla {}
blabla {}
@mediaquery mobile {
    body.home .class { styles }
    body.home .another-class { more styles }
    bla {}
    blabla {}
}

Answer 2

您必须同时使用媒体查询和来定位 CSS 主页。

您需要一个正文 class，例如媒体查询中的 home 您要定位的屏幕尺寸，即：

@media only screen and (max-width: 600px) {

    .home .my-selector {
        font-size: 14px;
    }

}

WordPress 主题通常会为页面 ID 添加一个 body class，或者页面的 slug，即 home 或 front-page。查看 <body> 标签内的页面源代码。

最好了解如何使用 Firefox (or Firebug) or Chrome or Safari or IE 中的开发人员工具，以查看您网站上正在加载的内容以及如何实时使用和更改 CSS 和 HTML ，然后能够将这些更改添加到主题中的 style.css。

Is it possible to target only my home page with a media query?