是否可以只针对我的主页进行媒体查询？答案

【问题标题】：Is it possible to target only my home page with a media query?是否可以只针对我的主页进行媒体查询？
【发布时间】：2018-03-05 20:13:51
【问题描述】：

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

我正在建立一家 woo-commerce 商店，在移动设备上查看时，除了主页之外，所有网站看起来都不错。几天来我一直在寻找解决方案，但没有成功。

如果可以，请告诉我我从什么代码开始。非常感谢您提供的任何帮助，我对此深表感谢。宝拉

【问题讨论】：

【解决方案1】：

当然。我认为在 wordpress 中，如果是主页，您在 body 标签中有 home 类。所以你在你的类定义中，不管类在哪里，在媒体查询中与否。

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

你可能有 css 文件：

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

【讨论】：

【解决方案2】：

您必须同时使用媒体查询和一种将 CSS 定位到主页的方式。

您需要一个主体类，例如媒体查询中的home，以获取您要定位的屏幕大小，即：

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

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

}

WordPres 主题通常为页面 ID 或页面的 slug 添加 body 类，即 home 或 front-page。查看<body>标签内的页面源代码。

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

【讨论】：