Html CSS中如何处理不同的屏幕分辨率？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4802888/
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 deal with different screen resolutions in CSS?
提问by aateeque
I am new to UI design- was wondering what the best way to deal with different screen resolutions is when positioning various HTML elements? I thought using %ages would be the way forward but turns out it isn't!
我是 UI 设计的新手 - 想知道在定位各种 HTML 元素时处理不同屏幕分辨率的最佳方法是什么？我认为使用 %ages 将是前进的方向，但事实证明它不是！
采纳答案by Matt Asbury
You should take a look at liquid layouts. This deals with an expanding or contracting web page based on a users browser size -
你应该看看液体布局。这涉及基于用户浏览器大小的扩展或收缩网页 -
http://www.maxdesign.com.au/articles/liquid/
http://www.maxdesign.com.au/articles/liquid/
回答by Horia Dragomir
Have a read here: http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
在这里阅读：http: //www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
You'd be most interested in @mediaqueries, particularly max-widthand min-device-width
您对@media查询最感兴趣，尤其是max-width和min-device-width
回答by Tom Gullen
% is the correct way. If you start using Javascript to detect resolution and adjust design based on that your code is going to turn into tasty meat spaghetti very quickly.
% 是正确的方法。如果您开始使用 Javascript 来检测分辨率并基于此调整设计，您的代码将很快变成美味的肉意大利面。
Back in the day I was always told to design with a minimum resolution of 800x600, but nowadays I always go by 1024x768 as a minimum resolution.
在过去，我总是被告知以 800x600 的最小分辨率进行设计，但现在我总是将 1024x768 作为最小分辨率。
Without more specifics about designs, we can't really help more I'm afraid!
没有更多关于设计的细节，我们真的帮不上忙了！
回答by Joseph Le Brech
check 960grid it's a layout standard that's divisible by the most common screen resolutions.
检查 960grid 它是一种布局标准，可以被最常见的屏幕分辨率整除。
回答by Frederico Kronemberger Da Cruz
First see if this works for you. replace your tag with this
首先看看这是否适合你。用这个替换你的标签
Now if does, than implement this onload. This will reduce 100% of your headaches and will do a quick hack for laptops with 1366 x 768 screens without damaging the look and feel for newer, bigger and better screens
现在，如果是，那么实现这个 onload。这将 100% 减少您的头痛，并且可以快速破解具有 1366 x 768 屏幕的笔记本电脑，而不会损坏更新、更大和更好屏幕的外观和感觉
var screenHeight = screen.height;
if (screenHeight < 800) {
$('body').css('zoom', 0.8);
} else {
$('body').css('zoom', 1);
}
