logo标签列表

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

javascripthtmlcssbrowsergoogle-apps-script
8
我们正在为全球艺术教师开发一个开源网络应用程序，以便他们能够协同工作。我们需要一个漂亮的网站，它可以根据浏览器的活动宽度自动调整大小，就像google.org或barackobama.com那样。
我们可以检测浏览器、操作系统等信息，但不想使用这些信息。我们只想要四到五个不同的样式表，在浏览器宽度调整时触发。
例如，当您在桌面电脑上使用浏览器访问应用程序时，当浏览器处于全屏状态时，您会看到完整的应用程序。然后，随着浏览器减小宽度，网站立即和动态地更改其格式，以实现通用兼容性。
我们不希望我们的CSS基于浏览器类型或原始宽度而更改，而是希望它根据视口的当前宽度每毫秒自动调整大小——无论它是“移动”设备、“平板”机还是“桌面”浏览器。
奇怪的是，我正在使用Google Apps Script来托管我们的Web应用程序，因此似乎任何meta viewport标记都被删除了。
如何根据当前浏览器窗口的宽度引入四到五个不同的样式表？
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/

1
我认为你在媒体查询中把 min-device-width 和 max-device-width 搞反了。 - Bruce Alderman
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' />
8
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' />

如需更多代码和详细信息

点击这里

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接