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

Question

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

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

我是什么意思？标题在移动中的外观

正如你所看到的，它只占据了标题的所有上述内容。

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

此外，字体看起来很糟糕，它的颜色真的很浅，大多数人都必须集中注意力才能看到它。

我在谷歌字体插件的帮助下更改了字体，但H1的大小仍然是不可变的，我尝试了谷歌字体，也尝试了在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