我如何动态调整基于浏览器的宽度CSS样式表？ [英] How do I dynamically adjust css stylesheet based on browser width?

问题描述

我们正在开发的艺术教师的开放源代码的Web应用程序在世界各地的共同努力。我们需要一个不错的网站，简单地调整自身基于浏览器的有源宽度，像google.org或barackobama.com这样做很好。

We're developing an open-source web app for arts teachers across the world to work together. We need a nice website that simply adjusts itself based on the active width of the browser, like google.org or barackobama.com does so well.

我们可以检测浏览器，操作系统等，但不希望使用任何信息的。我们只是希望，当调整浏览器的宽度被触发四个或五个不同的样式表。

We can detect the browser, the OS, etc. but don't want to use any of that info. We just want four or five different stylesheets that are triggered when the browser width is adjusted.

因此​​，举例来说，当你使用台式计算机访问该应用程序在浏览器中，您看到完整的应用程序时，浏览器全屏显示。然后，当浏览器减小其宽度站点立即和动态改变其格式，以允许通用的兼容性。

So, for example, when you visit the app on a browser using a DESKTOP computer, you see the full app when the browser is full screen. Then, as the browser reduces its width the site immediately and dynamically changes its format to allow for universal compatibility.

我们不希望我们的CSS来改变基于浏览器类型或原始宽度，而是希望它永远毫秒的基础上，视口的当前宽度调整 - 无论它是否是一个移动设备或平板机或桌面浏览器。

We don't want our CSS to change based on browser type or original width, but instead want it to adjust ever millisecond based on the current width of the viewport -- regardless of whether or not it is a "mobile" device or a "tablet" machine or a "desktop" browser.

奇怪的是，我使用谷歌Apps脚本来承载我们的Web应用程序，所以它看起来像任何中继检视标签将被删除。

Curiously, I'm using Google Apps Script to host our web app, so it looks like any meta viewport tags are removed.

我们如何可以引入基于当前的观察浏览器窗口的宽度四五个不同的样式？

How can we introduce four or five different stylesheets based on the width of the current viewing browser window?

推荐答案

您可以使用CSS媒体查询，像这样：

You can either use CSS media queries, like so:

<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的，就像这样：

Or jQuery, like so:

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：

这两个发现/

这篇关于我如何动态调整基于浏览器的宽度CSS样式表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！