手机网站：专注于容器而不是全身？

Question

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

在手机上查看我的（临时）网站（无论哪种类型） - ＆gt; Click 你会看到整个网站包括背景遍布你的屏幕，而不是仅仅关注容器。

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

快速模型：

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

谢谢！

Answer 1

试试这个：

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

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

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

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

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

在移动设备上将内容扩展到100％。

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

Answer 2

如果您想让它具有响应性，我认为最好的解决方案是使用Media Query而不是调整视口。将#container设置为100％宽度和高度，并将边距设置为0.