CSS格式不能使文章在移动设备上可读

Question

如果您在桌面上访问此blog article，则会看到段落位于中心位置。通过在每一侧（左侧和右侧）放置200px的填充，我能够实现这一点。我这样做是因为我觉得这篇文章更具可读性，至少对桌面用户来说是这样。

但是如果你调整窗口大小，你会注意到段落也在移动，这使得它们对移动用户来说是不可读的。

我有办法解决这个问题吗？

注意：文章中的所有元素都会自动包含在 p 中，因为它是Wordpress。

Answer 1

您只需针对移动设备进行一些css黑客攻击。尝试将其添加到样式表的底部：

@media screen and (max-width:480px) {

  div#main.fullpost p {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

}

Answer 2

从<p>删除内联样式并为其提供课程。 然后移除您在屏幕上padding-right: 200px; padding-left:200px;提供的<p>。

@media screen and (max-width:600px) {
padding-right: 10px; padding-left:10px;
}