如何根据浏览器宽度动态调整css样式表？

Question

我们正在为世界各地的艺术教师开发一个开源网络应用程序,以便一起工作.我们需要一个不错的网站,根据浏览器的有效宽度调整自己,比如google.org或barackobama.com做得很好.

我们可以检测浏览器,操作系统等,但不想使用任何该信息.我们只想要调整浏览器宽度时触发的四到五个不同的样式表.

因此,例如,当您使用DESKTOP计算机在浏览器上访问应用程序时,您会在浏览器全屏时看到完整的应用程序.然后,当浏览器立即减小其宽度时,会立即动态更改其格式以允许通用兼容性.

我们不希望我们的CSS根据浏览器类型或原始宽度进行更改,而是希望它根据视口的当前宽度调整为毫秒 - 无论它是否是"移动"设备或"平板电脑"机器或"桌面"浏览器.

奇怪的是,我使用Google Apps脚本来托管我们的网络应用程序,因此看起来删除了任何元视口标记.

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

Answer 1

您可以使用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/

Answer 2

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' />

Answer 3

使用CSS媒体查询执行此操作