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

Question

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

我正在尝试找出在我当前的多个媒体设备元素中构建 CSS 的最佳方法。我希望能够有一个样式表:

1. CSS 重置(一切可用)
2. 普通桌面“屏幕”。 (仅限台式电脑)
3. 打印'打印'(仅打印)
4. iPhone/手持设备(仅手持设备)
5. IE6 样式表(仅限 IE6)

所以我的问题是:我是否认为正确的控制方式是......

• 为 resets.css 设置 media="all"
• 设置 media="screen"为桌面.css
• 在“此处”使用条件注释旧版浏览器。
• 为 print.css 设置 media="print"
• 使用 css3 媒体查询，例如:@media 只有屏幕和(最小设备宽度:320px)和(最大设备宽度:480 像素){ }

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

Answer 1

它可能取决于几个因素，其中最重要的是您的设计流程。这是一篇关于从移动端开始设计的好文章:

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

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

并且，要了解不同的媒体查询如何对调整大小或方向更改使用react，请尝试此页面上的演示:

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

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