html - 用于打印、移动和桌面的 CSS 媒体查询

Question

我环顾四周，但需要一个更简洁的答案来回答这个问题。

我正在尝试在我当前的项目中为多种媒体设备构建 CSS 的最佳方法。我希望能够有一个样式表：

1. CSS 重置（一切使用）
2. 正常的桌面“屏幕”。（仅限台式电脑）
3. 打印“打印”（仅打印）
4. iPhone/掌上电脑（仅限掌上电脑）
5. IE6 样式表（仅限 IE6）

所以我的问题是：我认为控制这种情况的正确方法是否正确。

• 为 resets.css 设置 media="all"
• 为 desktop.css 设置 media="screen"
• 对旧版浏览器使用条件注释“此处”。
• 为 print.css 设置 media="print"
• 使用 css3 媒体查询，例如：@media only screen and (min-device-width: 320px) and (max-device-width: 480px){ }

有没有人有更多的经验来设置可以分享他们的方法的多个设备 css？你如何自己组织这个？

Answer 1

它可能取决于几个因素，其中最重要的是您的设计流程。这是一篇关于从移动端进行设计的精彩文章：

http://stuffandnonsense.co.uk/projects/320andup/

只要看看这些人是如何开发他们的样板的，你就可以学到很多东西。

并且，要查看不同的媒体查询如何对调整大小或方向更改做出反应，请尝试此页面上的演示：

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

您可以调整媒体查询属性以了解它们如何影响页面。