如何在CSS中处理不同的屏幕分辨率?

时间:2011-01-26 09:19:51

标签: html css resolution

我是UI设计的新手 - 想知道在定位各种HTML元素时,处理不同屏幕分辨率的最佳方法是什么? 我认为使用%age会是前进的方向但事实并非如此!

5 个答案:

答案 0 :(得分:8)

请在此处阅读:http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

您最感兴趣的是@media次查询,尤其是max-widthmin-device-width

答案 1 :(得分:4)

你应该看看液体布局。这涉及基于用户浏览器大小的扩展或签约网页 -

http://www.maxdesign.com.au/articles/liquid/

http://www.alistapart.com/articles/negativemargins/

答案 2 :(得分:2)

%是正确的方法。如果您开始使用Javascript来检测分辨率并根据您的代码将很快变成美味的肉意大利面来调整设计。

在那天我总是被告知设计的最低分辨率为800x600,但现在我总是以1024x768作为最低分辨率。

如果没有更多关于设计的细节,我们恐怕不能帮助更多!

答案 3 :(得分:2)

检查960grid这是一个可以被最常见的屏幕分辨率整除的布局标准。

答案 4 :(得分:0)

首先看看这是否适合您。 用这个替换你的标签

现在如果是,那么实现这个onload。这将减少100%的麻烦,并将快速破解1366 x 768屏幕的笔记本电脑,而不会损坏更新,更大,更好的屏幕的外观和感觉

var screenHeight = screen.height;
if (screenHeight < 800) {
  $('body').css('zoom', 0.8);
} else {
     $('body').css('zoom', 1);
}