如何应用特定的样式表取决于屏幕分辨率？

Question

我想要html脚本，它将识别屏幕分辨率，然后取决于我要为应用程序链接各个样式表。

例如，如果分辨率在600x400之间，则我要应用mobile.css，否则要应用普通的web.css。

可能吗？ 如果是，那么如何实现呢？

我没有使用jquery ...我正在使用GWT应用程序，并且我想将此检查添加到html文件中。

Answer 1

现在在您的

头标

像这样

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> // add this line in your head
</head>

更多信息

用于CSS媒体查询

@media only screen and (max-width: 600px) {

// here your stylesheet 
    }

更多信息请点击这里

Answer 2

我会为此使用CSS媒体查询。

这意味着您可以将所有规则放在一个样式表中，并共享通用规则。 这也意味着更改内容时只有一个文件可以更新。

Answer 3

以下是有关如何执行此操作的良好指南

http://css-tricks.com/resolution-specific-stylesheets/

Answer 4

可能是这样的：

var style = document.createElement('style');
if ($(window).width() <= 600 && $(window).height() <= 400) {
    style.src = 'mobile.css';
} else {
    style.src = 'normalweb.css';
}
document.body.appendChild(style);

Answer 5

如果您需要为媒体查询所拦截的CSS编写一些JavaScript函数，则可以使用这个很酷的库： https : //github.com/WickyNilliams/enquire.js

如何应用特定的样式表取决于屏幕分辨率？

问题描述

5 个解决方案

解决方案1
4 已采纳 2013-04-23 10:11:04

解决方案2
2 2013-04-23 10:11:07

解决方案3
1 2013-04-23 10:07:06

解决方案4
0 2013-04-23 10:14:58

解决方案5
0 2013-04-23 10:28:02

如何应用特定的样式表取决于屏幕分辨率？

问题描述

5 个解决方案

解决方案1 4 已采纳 2013-04-23 10:11:04

解决方案2 2 2013-04-23 10:11:07

解决方案3 1 2013-04-23 10:07:06

解决方案4 0 2013-04-23 10:14:58

解决方案5 0 2013-04-23 10:28:02

解决方案1
4 已采纳 2013-04-23 10:11:04

解决方案2
2 2013-04-23 10:11:07

解决方案3
1 2013-04-23 10:07:06

解决方案4
0 2013-04-23 10:14:58

解决方案5
0 2013-04-23 10:28:02