Html 如何确保网站适合所有屏幕分辨率？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3292140/
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
How to make sure a website is suitable for all screen resolutions?
提问by David
Just spent several hours writing up for a new site... looks great in my resolution, 1366x768... However, even going down to 1024x768 means that not everything fits inside the screen width!!
刚刚花了几个小时为一个新网站写文章...在我的分辨率下看起来很棒，1366x768...但是，即使降低到 1024x768 也意味着并非所有内容都适合屏幕宽度！！
Tried:
尝试：
<style type='text/css'>
body {width:100%;}
</style>
This does have some effect on my resolution but no effect on smaller resolutions... How can I make sure my webpage will fit 100% in all screen resolutions?
这确实对我的分辨率有一些影响，但对较小的分辨率没有影响...我如何确保我的网页在所有屏幕分辨率下都 100% 适合？
采纳答案by R. Hill
I use CSS @media directive, unfortunately, not supported by IE8-. Compliant CSS3 allow you to style differently according to the width of the viewport:
不幸的是，我使用 CSS @media 指令，IE8- 不支持。兼容 CSS3 允许您根据视口的宽度设置不同的样式：
<style type="text/css">
@media screen and (min-width:1px) and (max-width:1365px) {
...
}
@media screen and (min-width:1366px) {
...
}
</style>
By the way, you have an error in your CSS, you forgot to specify the unit:
顺便说一句，您的 CSS 中有错误，您忘记指定单位：
body {width:100%;}
回答by Paul
One thing you might be interested in are CSS Media Queries. They aren't supported in every browser, IE for example only supports it as of the version 9 preview, but they can help with resizing windows as well as smaller resolutions, because you can apply different CSS rules to each screen size.
您可能感兴趣的一件事是CSS 媒体查询。并非每个浏览器都支持它们，例如 IE 仅在版本 9 预览版中支持它，但它们可以帮助调整窗口大小以及更小的分辨率，因为您可以对每个屏幕大小应用不同的 CSS 规则。
Apart from that, make sure that your layout isn't "rigid", i.e. don't treat divs like tables. Make their width based on a percentage of the parent, or use floating to get them to line up correctly. It is acceptable to have a "minimum width" of your site -- usually 800 or 1024 -- accepting that users on ancient resolutions like 640x480 will just have to scroll.
除此之外，请确保您的布局不是“刚性的”，即不要将 div 视为表格。根据父级的百分比设置它们的宽度，或使用浮动使它们正确排列。您的网站有一个“最小宽度”是可以接受的——通常是 800 或 1024——接受像 640x480 这样的古老分辨率的用户只需要滚动。
You will likely need to go back to the drawing board with your CSS and design it to readjust itself, and/or have a minimum width.
您可能需要使用 CSS 返回绘图板并设计它以重新调整自身，和/或具有最小宽度。
回答by 2ndkauboy
Your CSS for the body tag look OK. But if e.g. all of the DIVs in your body have a fixed size, they will never fill out the whole width. Can you post an example of your page?
您的 body 标签 CSS 看起来不错。但是，例如，如果您体内的所有 DIV 都具有固定大小，则它们永远不会填满整个宽度。你能发布一个你的页面的例子吗？
回答by JAB
Unless you want to do all size measurements in percentages, I don't think you can. And even then, you'll have a problem if someone uses a resolution in a different aspect ratio or a really low resolution, because in the first case your page will be stretched or squished and in the second you could have layout issues.
除非您想以百分比进行所有尺寸测量，否则我认为您不能。即便如此，如果有人以不同的纵横比或非常低的分辨率使用分辨率，您也会遇到问题，因为在第一种情况下，您的页面会被拉伸或压扁，而在第二种情况下，您可能会遇到布局问题。
回答by theorise
People tend to make websites 960px wide.
人们倾向于将网站设为 960 像素宽。
It is easy to split into even sized columns, as it is divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16, plus it fits nicely into the smallest (worthwhile) resolution of 1024px.
它很容易分成大小均匀的列，因为它可以被 3、4、5、6、8、10、12、15 和 16 整除，而且它非常适合最小（有价值的）分辨率 1024px。
You can of course use fluid layouts, or various methods of detecting screen resolution, but if you are using a lot of imagery, it makes it a pita.
您当然可以使用流体布局或检测屏幕分辨率的各种方法，但如果您使用大量图像，它就会成为一个皮塔饼。
回答by Ben Shelock
I would recommend you use a CSS framework. They build the foundations of your design so you don't have to worry about things like this.
我建议您使用 CSS 框架。它们为您的设计奠定了基础，因此您不必担心此类问题。
My personal favourite is Blueprintas they take care of things such as typography and form styling not only the grid layout, which is what you're after.
我个人最喜欢的是Blueprint，因为它们处理诸如排版和表单样式之类的事情，而不仅仅是网格布局，这正是您所追求的。
960gsis another popular one which works in a very similar way to Blueprint. They also have a few tools to help you with customizing your development and is not as restricting as Blueprint.
960gs是另一种流行的，其工作方式与 Blueprint 非常相似。他们还有一些工具可以帮助您自定义开发，并且不像 Blueprint 那样限制。
They are the two I've used before, but I'm sure there are loads more.
它们是我以前使用过的两个，但我确信还有更多。
回答by Gert Grenander
Make layout stylesheets for the most common resolutions... let's say 800x600, 1024x767 and 1280x1024. Then load them with:
为最常见的分辨率制作布局样式表……比方说 800x600、1024x767 和 1280x1024。然后加载它们：
<link rel='stylesheet' media='screen and (min-width: 778px)' href='css800width.css' />
You can read more at CSS-Tricks.
您可以在CSS-Tricks阅读更多内容。
