Question

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

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

如果是这样，请告诉我我开始使用的代码。非常感谢任何帮助，我对此深有感触。宝拉

Answer 1

当然可以。我认为在wordpress中，您在home代码中有body课程，如果它是主页。所以你在课堂定义中，在媒体查询内部，不管课程的位置都不重要。

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。

您需要一个正文类，例如媒体查询中的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中。