8

我们正在开发一个开源网络应用程序，供世界各地的艺术教师一起工作。我们需要一个漂亮的网站，它可以简单地根据浏览器的活动宽度进行自我调整，就像 google.org 或 barackobama.com 就做得很好。

我们可以检测浏览器、操作系统等，但不想使用任何这些信息。我们只需要在调整浏览器宽度时触发四五个不同的样式表。

因此，例如，当您使用台式计算机在浏览器上访问应用程序时，您会在浏览器全屏时看到完整的应用程序。然后，随着浏览器减小其宽度，站点会立即动态更改其格式以实现通用兼容性。

我们不希望我们的 CSS 基于浏览器类型或原始宽度而改变，而是希望它根据视口的当前宽度以毫秒为单位进行调整——无论它是“移动”设备还是“平板电脑”机器或“桌面”浏览器。

奇怪的是，我正在使用 Google Apps 脚本来托管我们的网络应用程序，所以看起来所有元视口标签都被删除了。

我们如何根据当前查看浏览器窗口的宽度引入四五个不同的样式表？

4

4 回答 4

16

您可以使用 CSS 媒体查询，如下所示：

<link rel="stylesheet" media="screen and (min-device-width: 700px)" href="css/narrow.css" />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<link rel="stylesheet" media="screen and (max-device-width: 901px)" href="css/wide.css" />

或者 jQuery，像这样：

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/medium.css");
    } else {
       $("#size-stylesheet").attr("href", "css/wide.css"); 
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

两者均来自：http ://css-tricks.com/resolution-specific-stylesheets/

于 2012-08-15T01:00:34.863 回答
9

CSS媒体查询是要走的路

<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='css/wide.css' />
于 2012-08-15T01:01:09.823 回答
8

使用CSS 媒体查询来做到这一点

于 2012-08-15T01:00:10.987 回答
2

您可以使用 CSS。

<link rel='stylesheet' media='screen and (max-width: 480px)' href='css/mobile.css' />
<link rel='stylesheet' media='screen and (min-width: 481px)' href='css/pc.css' />

有关更多代码和详细信息

点击这里

于 2014-03-26T16:17:58.910 回答