Question

是的，这确实是您的想法

Answer 1

如果您遇到的问题是网站在更大或更小的屏幕上看起来有所不同（至少我认为这是基于该问题的问题），那么您将需要调查媒体查询。我看到您的样式表中有一些，但是由于您没有使用它们，它们几乎没有作用。请查看此link，以了解有关媒体查询的更多信息。如果您还有其他问题，请随时提问。

Answer 2

您的解决方案是将所有内容放入container中。您可以创建自定义类container，也可以根据需要命名。

并为此类添加样式：

.container {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}

但是我同意Joe ，您应该了解有关媒体查询的更多信息。

Answer 3

正如乔所说，您应该检查媒体查询。如果设计在特定的断点处发生更改，则媒体查询非常有用。

使用基于百分比/视口大小的单位（而不是像素），您还将获得很多收益。

#someid{
    height: 10px;  //Just 10 pixels tall.
    height: 10%;  //10% of the height of the immediate parent.
    height: 10vh;//10% the height of the Viewport Height. (1vh = 1% viewport height)
    width: 10vw;//10% the height of the Viewport Height. (1vw = 1% viewport width)
}

您可以应用基于vh，vw或%的单位，而不是基于静态的“ px”单位，以使元素在窗口中以“宽度”或“高度”缩放视口或其封装父级。

Stackoverflow没有帮助

3 个答案: