针对不同尺寸浏览器窗口使用不同的样式表

也称为“分辨率相关布局”。单个网站，针对不同分辨率使用不同的 CSS 文件来重新排列网站，以充分利用可用空间。

有一种 W3C 标准 方法来声明它们。一种方法是测试“device-width”，如下所示

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

上面的代码仅当查看它的设备宽度为 800px 或更宽时，才会将 800.css 样式应用于文档。并且…以这种方式支持“媒体查询”。

请记住，这是设备宽度，而不是浏览器窗口的当前宽度。在 iPhone（3G(s)）上，这意味着 480px。我的新款 MacBook Pro 将为设备宽度返回 1920px。但此时我的实际浏览器窗口只有它的一半。在使用浏览器时，设备宽度可能始终占手机屏幕的 100%，因此在处理移动设备时非常有用，但在笔记本电脑/台式机浏览器中则不太有用。

在我看来，浏览器窗口的当前宽度（“视口”）更有用。我们甚至可以指定仅在视口宽度在两个不同的像素大小之间时才使用的样式表

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

该样式表仅当当前浏览器窗口宽度在 701 到 900 像素之间时才会生效。

浏览器支持

IE 9+、Firefox 3.6+、Safari 3+、任何 Chrome、Opera 10+。 Mozilla 建议 在 <link /> 的 media 属性的开头使用“only”，这将隐藏不支持媒体查询的旧版浏览器中的样式表。这可能就是您想要做的，也可能不是…当然，具体情况视具体情况而定。

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

通常，布局是很难推行“渐进增强”的事情之一。圆角变成方形，没什么大不了的。布局混乱，那是个大问题。像 iPhone 这样的设备现在非常好用，因为浏览器选择非常有限（过去只有 Mobile Safari，现在还有 Opera），而且它们都是非常好的浏览器，您可以依靠此类技术来发挥作用。

如果 IE 支持至关重要，我们始终可以使用 JavaScript！

使用 jQuery 实现

使用 JavaScript，我们可以测试窗口宽度并相应地更改活动 CSS 文件。这将在所有浏览器中都能正常工作。您可以像任何其他元素一样为 <link /> 元素添加 ID，因此让我们添加它

<link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />

然后，我们可以将其用作挂钩并更改样式表的 href 值。浏览器将看到该更改，并取消应用旧的 CSS 并重新应用新链接的 CSS。我们将立即运行一次我们的微调测试，然后在每次窗口大小调整后运行。

function adjustStyle(width) {
  width = parseInt(width);
  if (width < 701) {
    $("#size-stylesheet").attr("href", "css/narrow.css");
  } else if (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());
  });
});

仅仅为了这个功能，jQuery 真的有必要吗？

不，但我相信您知道这只是我通常的做法，而且它使事情变得更容易。Kevin Hale 在 五年前 就写过关于动态分辨率布局的文章。它是“原生”JavaScript，并且至今仍然运行良好。

此外，还有一个很棒的 polyfill：Respond.js

视频

使用 CSS 实现分辨率相关布局，来自 Chris Coyier 在 Vimeo 上发布。

示例一

此示例具有一个针对窄（小于 700px）、中等（701 – 900px）和宽（大于 901px）浏览器窗口的特殊样式表。

查看演示

示例二

此示例与示例一执行完全相同的功能，只是通过 jQuery/JavaScript 而不是 CSS 媒体查询来实现。

查看演示

示例三

此示例演示了我们可以通过测试最大设备宽度来定位移动设备。

查看演示

下载

将所有这些内容在一个地方保存以供参考。

下载文件