Question

我创建了一个PSD的网站，所有相对基本的CSS。我在移动设备和平板电脑上有不需要的外部填充。我希望站点的左右边缘与浏览器的边缘齐平。它大约20px的不需要的填充。

请参阅我的开发网站： http://america.82ndmedia.com/

我已经测试了删除容器div的“margin：0 auto”并修复了它...但是我需要它才能在桌面上运行。

.container {
width: $w_total;
margin: 0 auto;
}

任何提示将不胜感激。谢谢！

Answer 1

这是由规则引起的：

@media (max-width: 450px) {
   .header, .columns > .sidebar, .post_box, .prev_next, .comments_intro,
   .comment, .comment_nav, #commentform, .comment_form_title, .footer {
       padding-right: 13px;
       padding-left: 13px;
}

以某种方式移除或覆盖此规则。

Answer 2

我建议使用百分比而不是像素，因为您当前的设置无法正常工作，并且难以使用硬编码像素进行响应式设计。

例如，您的主要包装div class="container"在较小的屏幕上设置为max-width 717px （似乎是随机的），但在其中您将id="blog"等元素设置为width 1020px，这显然不适合。

如果您将这些内部元素设置为其外部容器的百分比，那么它将更容易使其工作，并且它将真正响应或流体

平板电脑中不需要的CSS网站填充＆amp;移动

2 个答案:

平板电脑中不需要的CSS网站填充＆am​​p;移动

2 个答案:

平板电脑中不需要的CSS网站填充＆amp;移动