css - 使网站适用于多种屏幕尺寸

Question

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

我想要完成的事情：让我的网站在不同的屏幕尺寸上工作，而不需要缩小内容的大小。我有一个接近 YouTube 布局的网站，并希望它像 YouTube 一样缩小尺寸。它只是在右侧和左侧获得越来越少的空白空间，以使屏幕尺寸减小，使网站看起来相同，无论用户可能拥有的屏幕尺寸。

我怎么能做到这一点？

score 1 · Accepted Answer

将您的全部内容放在一个容器中，例如<div id="wrapper"></div>

然后在你的CSS中：

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

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

score 0 · Accepted Answer

最佳实践是从您想要解决的最小分辨率开始，并从那里建立。

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

简化：

#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 */
}

有一些很棒的响应式布局的预编码模板，但一开始可能会有点不知所措。如果你想尝试一些我建议如下：

2 回答 2