Question

我使用的是wordpress，我使用CSS通过添加填充使“关于”和“联系”页面的宽度更加居中且更小。但是，当我这样做时，尤其是在移动视图中（我认为平板电脑还可以），因此在两侧都有空白。

我正在使用的主题以我认为的方式构建，因此我无法在该主题中真正找到使元素显示为较小宽度并居中于页面的内容，因此我使用了填充以使其看起来像我想要。

'Contact' page of my site in mobile view

'Portfolio' page of my site in mobile view

这是我网站的链接：http://www.lisaweng.com/contact/

是否有CSS可以使这些页面在移动视图上查看时显示为正常或全角，即使我添加了填充也是如此，例如投资组合页面如何在移动设备上查看全角，即使它在屏幕两边都有空白时也是如此在台式机版本上查看过？

P.S。对于用于“关于”和“联系”页面元素的填充的CSS，我确实使用了百分比而不是像素。我不确定为什么在移动视图中查看时不能完全响应。

这是我的CSS在“关于”和“联系”页面上的样子：

.cf7_custom_style_1 {
  padding-left: 20%;
  padding-right: 20%;
}

和

.aboutme {
  padding-left: 14%;
  padding-right: 14%;
}

是否有代码可以解决此问题？或知道为什么会这样吗？如果有用于移动视图修复的代码，那么平板电脑是否也要使用相同的代码，或者平板电脑还具有CSS来修复其应有的响应速度？

Answer 1

使用@media查询在CSS中添加断点。

您需要在CSS代码中利用媒体查询来添加特定的断点。

将其添加到样式表中可能会有所帮助：

@media only screen and (max-width: 950px) {
   .cf7_custom_style_1 {
      padding-left: 10%;
      padding-right: 10%;
   }
}

@media only screen and (max-width: 600px) {
   .cf7_custom_style_1 {
      padding-left: 0;
      padding-right: 0;
   }
}

使用上面的代码会在950px和600px处添加断点。这意味着如果窗口大小= 950px，请将此CSS类更改为这些属性。

如何在移动视图中使填充响应？

1 个答案:

使用@media查询在CSS中添加断点。