1

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

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

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

正如您所看到的，它只为标题占用了所有上述（折叠）内容。

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

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

我在 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;
}
4

2 回答 2

1

使用@media CSS，您可以执行以下操作：

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

  /* More CSS */
}
于 2018-11-30T02:19:59.740 回答
0

正如 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
于 2018-11-30T02:50:49.787 回答