所有屏幕上的网站相同

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;  }
}​