CSS 调整以适应所有屏幕尺寸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9955642/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS adjust to fit all screen sizes
提问by Andy Chan
I have been having problems with CSS and adjusting to all screen sizes. I have come up with 2 possible (not ideal) ways of handling different screen sizes.
我一直在使用 CSS 并适应所有屏幕尺寸时遇到问题。我想出了 2 种可能（并不理想）的方法来处理不同的屏幕尺寸。
First option:
第一个选项：
One container to hold all elements inside it and make it absolute position with 100% width
一个容器来容纳其中的所有元素并使其绝对位置为 100% 宽度
and then each element inside that container is relative position with percentages for top, left, bottom, right.
然后该容器内的每个元素都是相对位置，带有顶部、左侧、底部、右侧的百分比。
Second option:
第二种选择：
One container to hold all elements inside it and make it relative position with 100% width
一个容器将所有元素保存在其中并使其相对位置为 100% 宽度
and then each element inside that container is absolute position with percentages for top, left, bottom, right.
然后该容器内的每个元素都是绝对位置，带有顶部、左侧、底部、右侧的百分比。
Is there any other possible solution to different screen handling?
对于不同的屏幕处理，还有其他可能的解决方案吗？
I've tried both and when looking at my website on different computers with different screen sizes, some of the elements are too far down, or too far up.
我已经尝试了这两种方法，当在不同屏幕尺寸的不同计算机上查看我的网站时，有些元素太靠下或太靠上。
I would appreciate any tips/help. Thanks!
我将不胜感激任何提示/帮助。谢谢！
回答by Bram Vanroy
I say: you don't need all those position's!
我说：你不需要所有这些position！
I have seen LOADS of webdevelopers that use position: relative;in every single element on a page, whereas it isn't necessary at all! Why don't you drop it? The only basic thing you need is:
我已经看到大量的 web 开发人员position: relative;在页面上的每个元素中都使用，而这根本没有必要！你为什么不放下它？你需要的唯一基本的东西是：
html, body, #wrapper {
width: 100%;
min-height: 100%;
}
In which #wrapperis your wrapping div. No need for position: relatives on the basic structure. If you need to shift some elements because the lay-out is screwed for a certain resolution, I advise you to use media-queries. Hereis the basic background information and hereis a good demo/tutorial.
其中#wrapper是您的包装 div。不需要位置：基本结构上的亲戚。如果您需要移动某些元素，因为布局因某个分辨率而被搞砸了，我建议您使用媒体查询。这是基本的背景信息，这是一个很好的演示/教程。
回答by ConMan
Why dont you use a CSS framework. Twitter-Bootstrap is a front end framework which allows you to scale the size of your front end web UI both up and down, so your website will work intuitively on both desktops and mobile devices.
为什么不使用 CSS 框架。Twitter-Bootstrap 是一个前端框架，它允许您向上和向下扩展前端 Web UI 的大小，因此您的网站将在台式机和移动设备上直观地工作。
