如何在为 Wordpress 生成 Pro Genesis 主题中使标题标题 H1 变小

Question

我正在使用 Genesis 的 Generate Pro 主题，这个主题的最大缺点是在移动设备中看到的标题的大小。还有字体。

随着用户越来越多地转向移动设备，让我的网站在移动设备上看起来更漂亮对我来说非常重要。

我是什么意思？ How Title Looks in the Mobile

如您所见，它仅占用标题的所有上述（折叠）内容。

我所有的内容都变低了，我必须滚动才能看到它。顺便说一句，没人喜欢。

还有字体-看起来很糟糕，它的颜色真的很浅，大多数人必须高度集中才能看到它。

我在 Google Font Plugin 的帮助下更改了字体，但 H1 的大小仍然无法更改，我尝试了 Google Font 并尝试在 WordPress 中更改代码字体大小，但没有任何帮助。我尝试更改的代码如下所示。（下）

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    line-height: 1.2;
    margin: 0 0 20px;
}

h1 {
    font-size: 36px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

Answer 1

使用@media CSS，你可以做这样的事情：

@media screen and (max-width: 780px) {
  h1 {
    font-size: 25px;
  }

  /* More CSS */
}

Answer 2

正如 Chris 所提到的，您可以使用媒体查询使您的样式根据屏幕大小具有不同的行为。下面是一些例子：

/* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {

    }

另外，制作更具体的类会让风格变得更重要。例如：

body .title h1 {}

将比：

 body h1

或

h1