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

【问题标题】：What are best practices for the default stylesheet when using CSS @media queries?使用 CSS @media 查询时，默认样式表的最佳做法是什么？
【发布时间】：2014-02-08 05:57:08
【问题描述】：

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

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

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

【问题讨论】：

标签： css media-queries

【解决方案1】：

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

桌面首先不应该对不支持@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;
}

另一种方法是移动优先。您为移动设备创建了一个基本样式表，然后使用媒体查询来为桌面用户增添趣味。您可以将桌面规则放在单独的文件中，并使用媒体查询和条件 cmets 在现代桌面浏览器和 IE 中加载它。但是这里的问题是IE手机也支持条件cmets，所以没有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]-->

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

祝你好运

【讨论】：