用於打印，移動和桌面的CSS媒體查詢

Question

我已經查看過，但需要更簡明的回答。

我正在嘗試鍛鍊最好的方式來構建我的當前項目中的多個媒體設備的CSS。我希望能有一個樣式表：

1. CSS復位（家居使用）
2. 正常的桌面「屏幕」。 （僅適用於臺式計算機）
3. 打印 '打印'（打印）
4. 的iPhone /手持設備（僅手持）
5. IE6的樣式表（僅適用於IE6）

所以我的問題是：我的權利想控制這將是正確的方式..

• 設置媒體=「所有」爲resets.css
• 設置媒體=「屏幕」爲 desktop.css
• 使用條件註釋'here'爲 傳統瀏覽器。
• 設置媒體= 「打印」 爲printing.css
• 使用CSS3媒體查詢，例如：只 @media屏幕和 （最小 - 設備寬度：320像素）和 （MAX-設備寬度：480像素）{}

有沒有人有更多的經驗設置多個設備的CSS可以分享他們的方法？你怎麼組織這個你自己？

Answer 1

它可以取決於幾個因素，其中最重要的是你的設計流程。這是從移動起來設計一個偉大的文章：

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

你可以只是看着這些傢伙是如何發展自己的樣板學到很多東西。

而且，看到查詢關於調整大小或方向變化不同的媒體如何反應，試試這個頁面上的演示：

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

您可以調整媒體查詢屬性得到它們是如何影響的感覺頁面。