所有屏幕上的網站都相同

Question

好的，你好我的名字是約旦。我有一個網站需要在所有屏幕尺寸上都一樣。我正在使用我認爲可行的百分比。所以兩個問題...

1. 如何定位與百分比底/頂部標籤（我想和它沒有工作）
2. 此外，如果上面的都不行，我應該怎麼做，使之每頁上都一樣。
3. 如果確實有效，有沒有更簡單的方法？

Answer 1

百分比不起作用。一種方法是在主div上定義最小寬度，最小高度，這樣無論頁面大小如何，頁面都不會小於最小大小。

Answer 2

歡迎來到StackOverflow！您可能想嘗試使用em單位而不是百分比，並且一定不要使用固定寬度。

Answer 3

您可以使用媒體查詢 http://www.w3.org/TR/css3-mediaqueries/

Answer 4

通過使用媒體查詢您可以通過瞄準所需的屏幕分辨率創建響應網站的佈局。

例如

@media screen and (max-width: 699px) and (min-width: 320px) { 
    div { background: blue; width: 100px; height: 100px; } 
} 


@media screen and (max-width: 1024px) and (min-width: 700px) { 
    div { background: green; width: 300px; height: 100px; } 
} 


@media screen and (max-width: 1280px) and (min-width: 1025px) { 
    div { background: red; width: 600px; height: 100px; } 
}​