根据屏幕分辨率应用classname(css)

时间:2012-12-04 20:40:06

标签: javascript html css

我在处理分辨率基础应用程序时遇到问题。

如果我有1024 x 768分辨率,我的应用程序应该是100%(表格布局)。如果我的分辨率高于1024 x 768,则应用程序应处于居中对齐状态(表格宽度为80%)。

function MOSTRA() {
    var SCR = screen.availWidth;
    var BRW = window.outerWidth;
    if (BRW < SCR) {
        document.getElementById('sample').className = 'maintable';
    } else {
        document.getElementById('sample').className = 'maintable1';
    }
}
window.onresize = MOSTRA;
window.onload = MOSTRA;

我使用了上面的代码,但这不起作用。

大家好,我已经检查过将警报放在所需的位置。现在我知道window.outerWidth中出现问题的位置,因为当我在该区域发出警报时,我在IE中未定义。似乎即不支持外部空间。我从以下链接中获取了上述代码。

http://jsfiddle.net/Guffa/q56WM/

请帮助我。

这是一个紧急问题

提前致谢

2 个答案:

答案 0 :(得分:2)

使用CSS3 Media Queries

@media screen and (min-width: 1024px) and (min-width: 768px)
{
  /* Center table! */
}

也可能:

<link rel="stylesheet" media="screen and (min-width: 1024px) and (min-width: 768px)" href="example.css" />

JS变种(因为OP不想要CSS 3):

if (window.screen.width >= 1024 && window.screen.width >= 768) {
  document.head.innerHTML += '<link rel="stylesheet" href="centerTable.css" type="text/css" />'
}

答案 1 :(得分:0)

务实地包括基于展示宽度的样式表,媒体类型:http://www.w3.org/TR/css3-mediaqueries/