如何在移动视图中使填充响应？
如何在移动视图中使填充响应？
提问于 2018-06-30 21:38:29
我正在使用wordpress，我使用CSS通过添加填充使我的“关于”和“联系人”页面的宽度更居中和更小。然而，当我这样做的时候，特别是在移动视图中(我认为平板电脑是可以的)，因为它在两边都有空白。
我使用的主题就是这样构建的，我想我在这个主题中找不到让元素看起来更小更宽、居中的东西，所以我用填充来让它看起来像我想要的那样。
'Contact' page of my site in mobile view
'Portfolio' page of my site in mobile view
这是我的网站的链接：http://www.lisaweng.com/contact/
有没有一个CSS可以让这些页面在移动查看时显示为正常或全宽，即使我添加了填充，就像项目组合页面在移动设备上显示全宽一样，即使在桌面版本上查看时屏幕两侧都有空白？
另外，对于用于填充“About”和“Contact”页面元素的CSS，我确实使用了百分比而不是像素。我不确定为什么在移动视图中查看它时不能完全响应。
下面是我的CSS在“关于”和“联系人”页面上的样子：
.cf7_custom_style_1 {
padding-left: 20%;
padding-right: 20%;
}和
.aboutme {
padding-left: 14%;
padding-right: 14%;
}有没有修复这个问题的代码？或者你知道为什么会这样吗？如果有移动视图修复的代码，那么它是不是也适用于平板电脑，或者平板电脑是否也有CSS来修复响应速度？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-30 23:28:10
使用@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类更改为这些属性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51118703
复制相关文章
相似问题
腾讯云开发者
