Question

在响应式网页设计过程中，我注意到每当我将宽度减小到小于1140px（行宽）时，背景图像（页眉和评论），背景颜色（页脚）和图像（进餐图片部分）就会缩小到较小的尺寸并且不会覆盖浏览器的100％宽度。

请检查代码，让我知道代码中的问题。

我在最后附上了问题图片链接。

链接：

Github：https://github.com/toth2000/Web-Page

Answer 1

当然不是100％。因为您使父母的div比孩子小。当孩子长大后，父母再也无法控制他们了。如果您使用引导程序，请使用container和cols使em处于合适的位置并具有响应能力。我将对您的部分内容进行响应，然后您可以了解问题所在。最有趣的一点是，您仅在检查时遇到问题。！

Answer 2

有一个溢出，其中.row的宽度固定为1140px。此外，Twitter链接上也会发生溢出。除此之外，对于较小的屏幕尺寸，h2还会发生另一次溢出。在.row，h2和.twitter-link上进行了这3个更改后，它将适合于245px以上的屏幕捕获。

style.css

.row {
    width: 100%; /* Change from 1140px to 100% */
    margin: 0 auto;
}

.twitter-link {
    margin-bottom: auto;
    margin-top: auto;
    text-decoration: none;
    color: #e98310;
    transition: border 0.2s;
    word-break: break-word; /* Add word-break */
}

h2 {
    margin-top: 80px;
    margin-bottom: 40px;
    font-size: 200%;
    font-weight: 350;
    text-align: center;
    text-transform: capitalize;
    word-break: break-word; /* Add word-break */
}

屏幕尺寸小于245px的剩余溢出是img.app-photo，我们可以通过媒体查询将宽度从自动设置为100％。

style.css

@media screen and (max-width: 245px) {
  .app-photo {
    width: 100%;
  }
}

背景图像没有响应

2 个答案: