Question

我希望html中的脚本可以识别屏幕分辨率，然后取决于我想要为应用程序链接相应的样式表。

e.g。如果分辨率在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>

More info

用于CSS媒体查询

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

// here your stylesheet 
    }

<强> More info Click here

Answer 2

我会为此使用css media query。

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

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 个答案: