骨架框架媒體查詢 - 它們是什麼意思？

我正在學習如何使用基本Skeleton Framework爲自適應設計，他們有以下媒體查詢：骨架框架媒體查詢 - 它們是什麼意思？

，我已經看到使用 max-width聲明，但是骨骼的似乎是相反的

/* Mobile first queries */ 

/* Larger than mobile */ 
@media (min-width: 400px) {} 

/* Larger than phablet */ 
@media (min-width: 550px) {} 

/* Larger than tablet */ 
@media (min-width: 750px) {} 

/* Larger than desktop */ 
@media (min-width: 1000px) {} 

/* Larger than Desktop HD */ 
@media (min-width: 1200px) {}

其他媒體查詢。

我不明白爲什麼使用min-width而不是max-width。

任何解釋都會幫助我找到min-width而不是max-width。

來源

2015-09-24 Robert Rocha

'最小寬度'指的是一個至少有那麼寬的視口（電腦屏幕/手機屏幕）。 '@media（min-width：400px）{/ * Styles go here * /}'將針對手機。這是一種移動優先方法，您可以在其中爲移動設備進行設計，並從此處移至桌面視圖。下面是一篇很好的文章，以幫助您開始：http://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website / –

通過使用min-width，您在媒體查詢之外編寫的任何CSS都將成爲「基礎」，並將應用於最大寬度爲400px的所有內容;基本上使你的移動風格，這通常是最簡單的風格，'基'的風格。

通過這種方式，您可以在特定的CSS上添加寬度。

另一種方法，max-width使您的桌面樣式（通常更復雜）成爲默認樣式，然後您必須從桌面樣式中「移除複雜度」，屏幕越小。

認爲它是這樣的：

隨着min-width你建立你的風格遞增，從最簡單的手機款式，直到你達到你的桌面大小，更復雜，款式

隨着max-width你「分解」你的從複雜的桌面樣式中逐漸增加樣式，直到您達到簡單的移動樣式。

來源

2016-03-13 02:52:06

骨架框架媒體查詢 - 它們是什麼意思？

回答

相關問題