使网站在多种屏幕尺寸上工作

问题描述：

我想让我的网站在不同的屏幕尺寸上工作，我是这方面的新手，可以使用一些帮助。使网站在多种屏幕尺寸上工作

我正在努力实现的目标：在不调整内容的情况下，让我的网站适用于不同的屏幕尺寸。我有一个网站接近YouTube的布局，并希望它的尺寸与YouTube的相同。它只是越来越少的左右空白空间越来越多的屏幕尺寸下降，使网站看起来相同，无论用户可能有什么样的屏幕尺寸。

我怎么能做到这一点？

http://mattgemmell.com/2008/12/08/what-have-you-tried /？ – djv

答

把你的全部内容的容器内像<div id="wrapper"></div>

然后在你的CSS：

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

其他比你要开始使用媒体查询或自适应设计，以创造一个响应或流体布局。

感谢这就是我所想要的！ –

很酷。如果有帮助，你能接受答案吗？ –

哦，我想知道如果我会创建对象，我会让他们在px或百分比它的工作与此？ –

答

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

但是，一开始最好只是使用流体布局。

简体：

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

对于响应式布局，有一些很棒的预编码模板，但是这些模板在开始的时候可能有些压倒一切。如果你想试试你的手一些，我建议如下：