Question

我正在努力让我的网站在不同的屏幕尺寸上工作，我是这个领域的新手，可以使用一些帮助。

我想要实现的目标：让我的网站在不同的屏幕尺寸上工作而不会缩小内容。我有一个接近YouTube布局的网站，并希望它的大小与YouTube相同。它只是在右侧和左侧的空白越来越少，屏幕尺寸越来越小，使网站看起来与用户可能拥有的屏幕尺寸相同。

我怎么能做到这一点？

Answer 1

将您的整个内容放在像<div id="wrapper"></div>

这样的容器中

然后在你的css中：

 #wrapper{
      width:960px;
      margin:0 auto;
 }

除了必须开始使用媒体查询或自适应设计来创建响应式或流畅的布局之外。

Answer 2

最佳做法是从您想要解决和构建的最小分辨率开始。

但是一开始最好只使用流畅的布局。

简化为：

#wrap {
 width:90%;
 margin:20px auto;
 max-width:960px;
}

将它放在您的整个内容周围，让内容的宽度为100％。

现在，您可以借助某些媒体查询启动并构建较小的分辨率。我建议只使用两个，一个用于平板电脑，一个用于小于一个的一切。

@media screen and (max-width: 767px) {
 /* ALL < TABLET */
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
 /* TABLET */
}

有一些很好的预编码模板用于响应式布局，但这些模板在开始时可能有点压倒性。如果你想尝试一下，我建议如下：