使网站适用于多种屏幕尺寸答案

【问题标题】：Making website work on multiple screen sizes使网站适用于多种屏幕尺寸
【发布时间】：2013-04-19 17:19:05
【问题描述】：

我正在尝试让我的网站在不同的屏幕尺寸上运行，我是这方面的新手，需要一些帮助。

我想要完成的工作：让我的网站在不同的屏幕尺寸上运行，而不需要缩小内容的大小。我有一个接近 YouTube 布局的网站，并希望它像 YouTube 一样缩小尺寸。它只是让左右两侧的空白越来越少，屏幕尺寸变小，无论用户的屏幕尺寸如何，网站看起来都一样。

我怎样才能做到这一点？

【问题讨论】：

【解决方案1】：

把你的全部内容放在一个容器里，比如<div id="wrapper"></div>

然后在你的 css 中：

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

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

【讨论】：

【解决方案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 */
}

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

【讨论】：