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

这取决于您是采用de'mobile first'方法还是'desktop first'。

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

}

另一种方法是先移动。您为移动设备创建一个基本样式表，然后使用mediaqueries来为桌面用户进行思考。您可以将桌面规则放在单独的文件中，并使用媒体查询和条件注释将其加载到现代桌面浏览器和IE中。但是这里的问题是IE移动也支持条件注释，所以没有预先win7手机的支持。你的html应该看起来像这样：

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

祝你好运