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

        这取决于您采用的是“移动优先”方法还是“桌面优先”方法。 首先，桌面不应该对不支持@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 Mobile也支持条件注释，因此没有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]-->

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