响应式填充问题

Posted 2023-03-06

【中文标题】响应式填充问题

【英文标题】：Responsive Padding Trouble

【发布时间】：2014-10-23 20:05:00

【问题描述】：

我为教程设计了一个响应式网页，但我遇到了不必要的填充问题。

http://zinzinzibidi.com/res

在此页面中，当您降低浏览器窗口分辨率时，您会在某些分辨率下看到水平滚动条 (overflow-x)。我正在努力理解，但几天后我无法解决这个问题。

这是我的麻烦的示例图片：

我的 CSS 代码在这里：http://zinzinzibidi.com/Areas/res/Content/css/style.css

我的媒体屏幕代码是

我做错了什么？

【参考方案1】：

我检查了您的代码，可能是您的 <div id="header-logo"> 创建了额外的填充。

由于img 在小于 tit 的屏幕上具有 300 像素的固定宽度，因此会在右侧创建一个额外的填充以适应屏幕。

尝试减少

@media screen and (max-width: 479px) and (min-width: 320px) 
 #header-container 
  width:;
 

编辑

---

基本上检查您正在使用的所有img，以确保它们的宽度合适并且适合屏幕。

【讨论】：

这个问题在其他媒体屏幕上也有。所以这与图像分辨率无关。

【参考方案2】：

似乎是内部物品导致了问题。从#header-main-buffer 中删除填充，它应该会消失。

文件的第 515 行：

#header-main-buffer 
    width: 300px;
    padding: 0 10px; <- this is your problem. remove it and it will be fixed
    ...

【讨论】：

谢谢它现在工作正常。你可以检查一下。顺便问一下，您是如何注意到问题的？ 300 像素宽度和 10 像素右 + 10 像素左填充响应 320 像素媒体屏幕宽度（？）

#head-container 具有完全相同的宽度和内边距，因此其内部元素将从添加到内边距的 10px 处开始向右。你真的可以摆脱 #head-container 上的填充，它应该也能正常工作，它只是缓冲项对我来说似乎更方便。

您也可以通过设置box-sizing: border-box; 来避免将来出现这种情况，您应该研究一下（link explaining borderbox），因为它会导致填充进入元素宽度，所以您实际上会像这样写width: 100%; padding: 0 10px; box-sizing: border-box;