Wordpress网站中的纯文本看起来很糟糕，在移动设备上运行

Question

最近我在Wordpress.com上建立了网站，但我的第一个文字在移动设备上看起来很糟糕，地址是codecamp.kz。有什么问题？

<h1 style="text-align:center;">НАУЧИСЬ ПРОГРАММИРОВАТЬ НА iOS С НУЛЯ</h1>
<h3 class="r"></h3>
<div style="text-align:center;"><a class="button" href="https://docs.google.com/forms/d/e/1FAIpQLSfLVUls_4LAE-Gte_90wCHLwWulCS3N8aUix6mDZiw0XZFePQ/viewform">Подать заявку</a></div>

Answer 1

我认为问题在于浏览器将您的文字检测为一个单词，浏览器会将其解释为不应该被破坏。

您不需要媒体查询，相反，您只需要一条css规则：

h1 {
    word-break: break-word;
}

解决方案2

加分！在你的HTML上你可能有类似的东西：

{НАУЧИСЬ ПРОГРАММИРОВАТЬ НА iOS С НУЛЯ}

只需删除 ，就可以了。

我的例子：

希望这很有用。

修改添加了结果图片。

Answer 2

您需要使用媒体查询来正确调整文本大小。此外，应该删除空<h3>。标题中有一些奇怪的&nbsp - 或许WordPress会把它们放进去？

媒体查询将允许您根据不同参数应用不同的样式：宽度，高度，方向，像素密度等... Here are some helpful starter notes.

以下是媒体查询的示例：

＆＃13;

＆＃13;

/* the following rules will only apply when the browser width is between the following widths. You can change the min/max widths to suit your needs. */
@media all and (min-width: 640px) and (max-width:1280px) {
  h1 {
    font-size:16px; /* or whatever size and unit */
    font-size:1.6rem; /* or whatever size and unit */
    }
}

/* OR */

@media screen and (orientation: landscape) {
 .element {
    font-size:26px; /* or whatever size and unit */
    font-size:2.6rem; /* or whatever size and unit */
 }
}

＆＃13;

＆＃13;

＆＃13;

另外，here are some media queries for standard devices。