responsive-design - 移动网站：专注于容器而不是整体？

Question

我真的不知道如何用英语描述这个主题，所以这里有更多信息：

在您的手机上检查我的（临时）网站（无论是哪种）->单击 您将看到的是整个网站，包括遍布您屏幕的背景，而不是特别关注容器。

我唯一的问题是：如何让屏幕专注于容器，而不是整个站点。换句话说：忽略背景并将容器分布在整个屏幕上。

快速样机：

实现它的最佳方法是什么，所以它会调整到手机的整个屏幕？

谢谢！

Answer 1

试试这个：

<meta name="viewport" content="width=device-width">

这会将您的设备“缩放”到合理的值。（“合理”仍然在一定程度上取决于供应商。）

在您的情况下，您可以使用device-width参数并输入适合您的值。但最好暂时坚持下去。

从这里开始，您可以通过媒体查询创建不同的 css 样式，例如指定

@media (max-width: 400px)
    .my-content-div {
        width: 100%;
    }
}

在移动设备上将您的内容缩放到 100%。

做一个真正的响应式设计仍然是一团糟，但它是可以做到的。关键是，你从至少可以松散依赖的东西开始，然后从那里开始工作。

Answer 2

如果你想让它响应我认为最好的解决方案是使用媒体查询而不是调整视口。将#container 设置为 100% 的宽度和高度，并将边距设置为 0。