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

Posted 2023-02-19

【中文标题】如何在移动视图中使填充响应？

【英文标题】：how to make padding responsive in mobile view?

【发布时间】：2018-12-09 15:36:33

【问题描述】：

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

我正在使用的主题是按照我的想法构建的，我无法在该主题中找到使元素看起来更小的宽度并在页面上居中的东西，所以我使用填充来让它看起来像我想要。

'Contact' page of my site in mobile view

'Portfolio' page of my site in mobile view

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

是否有一个 CSS 可以让这些页面在移动视图上查看时显示为正常或全宽，即使我添加了填充，就像投资组合页面如何在移动设备上查看全宽一样，即使它在屏幕两侧都有空白时在桌面版上查看？

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

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

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

和

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

有解决此问题的代码吗？或者知道为什么会这样？如果有用于移动视图修复的代码，那么它是否也适用于平板电脑，或者平板电脑是否也有一个 CSS 来修复它应该如何的响应？

【参考方案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 类更改为这些属性。

【讨论】：

您好，非常感谢您的帮助！非常感谢您的代码并指出媒体查询

抱歉遗漏了冒号。我已经更新了代码——好地方！至于徽标，请尝试使用媒体查询 .logo_wrapper top: 25px;。

感谢回复=)！！哎呀，我指的是导航菜单和联系表格开始位置之间的空白，而不是徽标和联系表格。如果使用媒体查询，你知道针对该区域的类名吗？我确实尝试了您编写的代码并尝试使用：@media only screen and (max-width: 1200px) .logo_wrapper top: 25px; 进行测试，徽标在同一个地方。附： 950px 和 600px 是平板电脑和手机尺寸的标准尺寸吗？想知道..

试试.container_inner.default_template_holder padding-top: 0;。至于标准尺寸，你应该测试每个像素。

编辑：我确实尝试了您编写的代码并尝试了它：@media only screen and (max-width: 950px) .logo_wrapper top: 25px; 并且成功了！！！谢谢！！！ =））！！！它在平板电脑/移动视图上的徽标前留出了一个空间，这也是我一直在寻找的东西！！非常感谢您的帮助和善意