使網站在多種屏幕尺寸上工作

我想讓我的網站在不同的屏幕尺寸上工作，我是這方面的新手，可以使用一些幫助。使網站在多種屏幕尺寸上工作

我正在努力實現的目標：在不調整內容的情況下，讓我的網站適用於不同的屏幕尺寸。我有一個網站接近YouTube的佈局，並希望它的尺寸與YouTube的相同。它只是越來越少的左右空白空間越來越多的屏幕尺寸下降，使網站看起來相同，無論用戶可能有什麼樣的屏幕尺寸。

我怎麼能做到這一點？

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

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

然後在你的CSS：

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

其他比你要開始使用媒體查詢或自適應設計，以創造一個響應或流體佈局。

2013-04-18 18:45:28

感謝這就是我所想要的！ –

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

哦，我想知道如果我會創建對象，我會讓他們在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 */ 
}

對於響應式佈局，有一些很棒的預編碼模板，但是這些模板在開始的時候可能有些壓倒一切。如果你想試試你的手一些，我建議如下：

2013-04-19 09:19:05 xate

回答