Question

我一直遇到CSS问题并调整到所有屏幕尺寸。我想出了两种可能的（非理想的）处理不同屏幕尺寸的方法。

第一个选项：

一个容器，用于容纳其中的所有元素，并使其具有100％宽度的绝对位置

然后该容器内的每个元素都是相对位置，顶部，左侧，底部，右侧的百分比。

第二个选项：

一个容器，用于容纳其中的所有元素并使其具有100％宽度的相对位置

然后该容器内的每个元素都是绝对位置，顶部，左侧，底部，右侧的百分比。

对于不同的屏幕处理，还有其他可能的解决方案吗？

我已经尝试了两种方法，当我在不同屏幕尺寸的不同计算机上查看我的网站时，有些元素太过分了，或者太远了。

我会很感激任何提示/帮助。谢谢！

Answer 1

我说：你不需要所有那些position！

我看过webdevelopers的LOADS在页面的每个元素中使用position: relative;，而根本没有必要！你为什么不放弃它？你需要的唯一基本要求是：

html, body, #wrapper {
    width: 100%;
    min-height: 100%;
}

#wrapper是你的包装div。不需要职位：基本结构上的亲戚。如果你需要移动一些元素，因为布局被拧成一定的分辨率，我建议你使用媒体查询。 Here是基本的背景信息，here是一个很好的演示/教程。

Answer 2

为什么不使用CSS框架。 Twitter-Bootstrap是一个前端框架，允许您上下扩展前端Web UI的大小，因此您的网站将在桌面和移动设备上直观地工作。