我们正在开发一款开源网络应用程序,供世界各地的艺术教师协同工作。我们需要一个漂亮的网站,它可以根据浏览器的事件宽度进行 self 调整,例如 google.org 或 barackobama.com 就做得很好。
我们可以检测浏览器、操作系统等,但不想使用任何这些信息。我们只需要在调整浏览器宽度时触发四到五个不同的样式表。
因此,例如,当您使用台式计算机在浏览器上访问该应用程序时,您会在浏览器全屏显示时看到完整的应用程序。然后,当浏览器减小其宽度时,网站会立即动态更改其格式以实现通用兼容性。
我们不希望我们的 CSS 根据浏览器类型或原始宽度而改变,而是希望它根据视口(viewport)的当前宽度每毫秒调整一次——不管它是否是“移动”设备或“平板电脑”机器或“桌面”浏览器。
奇怪的是,我正在使用 Google Apps 脚本来托管我们的网络应用程序,所以看起来所有元视口(viewport)标签都被删除了。
我们如何根据当前查看浏览器窗口的宽度引入四五个不同的样式表?
最佳答案
您可以使用 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());
});
});
关于javascript - 如何根据浏览器宽度动态调整 css 样式表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11962837/