用于打印，移动和桌面的CSS Media Query

Question

我看了一下，但需要对这个问题有一个更简洁的答案。

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

1. CSS重置（要使用的所有内容）
2. 普通桌面“屏幕”。 （仅限台式电脑）
3. 打印'打印'（仅打印）
4. iPhone /掌上电脑（仅手持）
5. IE6样式表（仅限IE6）

所以我的问题是：我认为控制这个的正确方法是正确的。

• 为resets.css
设置media =“all”
• 设置media =“screen” desktop.css
• 在这里使用条件评论' 旧版浏览器。
• 为printing.css
设置media =“print”
• 使用css3媒体查询，例如： @media只有屏幕和 （min-device-width：320px）和 （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/

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