CSS调整以适合所有屏幕尺寸

时间:2012-03-31 11:56:05

标签: css position

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

第一个选项:


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

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


第二个选项:


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

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


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

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

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

2 个答案:

答案 0 :(得分:1)

我说:你不需要所有那些position

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

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

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

答案 1 :(得分:0)

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