如何制作一个适合所有屏幕分辨率的网页

Question

我正在尝试创建一个适合所有屏幕尺寸（或分辨率）宽度的网页。

换句话说，我想以这样的方式格式化页面的宽度，使得任何查看它的人都不必在屏幕底部使用水平滚动条。

到目前为止，我在这个主题上找不到任何帮助。

Answer 1

你问这个问题的方式，不仅是身体的宽度必须是100％，而且其子元素的宽度也必须以百分比表示。

Answer 2

实现可伸缩网页的唯一方法是避免固定大小。当然，这会给文本带来问题，因为它会尝试将其包装在下面的行中，因此您必须指定最小宽度或将其与带有溢出的前置标记组合：隐藏，以便它不会影响页面布局仅仅无法阅读文本的费用。

幸运的是，您可以通过简单地将您的网页浏览器缩小到较小的分辨率并查看它如何平移来轻松测试您的页面。

Answer 3

好吧，有几种方法。一种方法是使用ems /百分比来表示宽度，从而实现流畅的设计，以适应用户的屏幕分辨率。另一个是有几张不同宽度的css表格，并根据来自简单js代码的屏幕分辨率检查调用它们。

第一个是有点困难，但产生良好的稳定结果。另一方面，（作为一名设计师）它有点会限制你的创造力。

在我看来，后者更为广泛的应用。如今，3种不同的样式表可满足全球大多数设备的需求。一个大约900px将覆盖一些较老的屏幕，一个大约1160px将处理更大和更现代的屏幕，并且一个用于移动设备（对不起，不知道近似宽度）应该做到这一点。