Question

我开发了一个小网站 - luxorclub.ru/en。在“菜单”部分中，瓶子图像应该是100％使用repeat-x。它在台式机上看起来不错，但在智能手机上却不是百分之百。

这就是它在桌面上的外观

这就是它在Galaxy S6上的表现

CSS：

#outer-menu-food {
    width: 100%;
    height: 700px;
    background: url('images/menu/menu-bg3.png') repeat-x;
    background-position: center;
}

Answer 1

这是因为#outher-menu-food占用视口的宽度，背景将仅延伸到该点。您可能需要重新构建网站的所有内容才能在移动设备上正常显示。就像在特定分辨率之后删除你给出的固定值作为宽度和东西，并考虑给它百分比值。

简而言之，请写media queries以便在移动设备上修复内容。