Question

我刚刚发现CSS @media queries，我觉得它们很棒！但是，我知道并非所有浏览器都支持它们（即最新版本的I.E.）。

我应该在默认样式表中做什么？我应该定位一个正常大小的屏幕吗？我应该走最低通用分母的路线并加载移动样式表吗？或者我应该让设计完全流畅？

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

Answer 1

这取决于你是采用de'mobile first'方法还是'桌面优先'。

桌面首先不应该对不支持@media的桌面浏览器造成任何麻烦，因为他们只会忽略移动样式表规则。唯一的问题是不支持媒体查询的移动浏览器。他们将呈现在桌面上看到的页面。但大多数智能手机支持媒体查询，除了pre-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;
}

另一种方法是移动优先。您为移动设备创建了一个基本样式表，然后使用mediaqueries来为桌面用户提供思考。您可以将桌面规则放在单独的文件中，并使用媒体查询和条件注释将其加载到现代桌面浏览器和IE中。但这里的问题是IE mobile还支持条件评论，所以没有pre-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]-->

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

祝你好运

使用CSS @media查询时，默认样式表的最佳做法是什么？

1 个答案: