1

我刚刚发现了CSS @media 查询，我认为它们很棒！但是，我知道并非所有浏览器都支持它们（即除了最新版本的 IE 之外的所有浏览器）。

那我应该在我的默认样式表中做什么？我应该瞄准普通尺寸的屏幕吗？我应该走最低公分母的路线并加载移动样式表吗？或者我应该让设计完全流畅吗？

为不支持@media 查询的浏览器制作默认样式表时，通常有什么好的计划？

4

1 回答 1

3

这取决于您是采用“移动优先”方法还是“桌面优先”方法。

桌面首先不应该对不支持@media 的桌面浏览器造成任何问题，因为它们只会忽略移动样式表规则，就像它们应该的那样。唯一的问题是不支持媒体查询的移动浏览器。他们将呈现在桌面上看到的页面。但是大多数智能手机都支持媒体查询，除了win7之前的手机。问题是你是否想支持这些手机。您的样式表应该看起来像这样。

body {
  width: 960px;
  margin: 0 auto;
}
@media only screen and (max-width: 500px) {
  /* override desktop rules to accommodate small screens*/
  body{
    width: auto;
    margin: 0;
}

另一种方法是移动优先。您为移动设备创建了一个基本样式表，然后使用媒体查询来为桌面用户增添趣味。您可以将桌面规则放在单独的文件中，并使用媒体查询和条件注释将其加载到现代桌面浏览器和 IE 中。但是这里的问题是IE手机也支持条件注释，所以win7之前的手机不支持。您的 html 应类似于：

<link rel="stylesheet" href="/css/basic.css" />
<link rel="stylesheet" href="/css/desktop.css" media="all and (min-width: 500px)" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/desktop.css" />
<![endif]-->

使您的设计流畅将有很大帮助。目的是无论屏幕尺寸如何，您的网站都将始终看起来不错。只需调整窗口大小即可尝试。如果屏幕变窄，流畅的设计不能让你的侧边栏移动到底部。为此，您需要媒体查询。

祝你好运

于 2011-06-11T18:08:15.110 回答