爲什麼flexboxgrid有媒體查詢？

我正在閱讀flexboxgrid的源代碼，我偶然注意到了這一點。爲什麼flexboxgrid有媒體查詢？

爲col-xs，col-sm和col-lg常見的風格是一樣的：

.col-xs, 
.col-xs-1 
{ 
    box-sizing: border-box; 
    flex: 0 0 auto; 
    padding-right: 0.5rem; 
    padding-left: 0.5rem; 
}

每個.col-[gridSize]-[columnSize]的風格不會改變，只要我們只改變gridSize：

.col-xs-1 { 
    flex-basis: 8.33333333%; 
    max-width: 8.33333333%; 
} 

.col-md-1 { 
    flex-basis: 8.33333333%; 
    max-width: 8.33333333%; 
} 

.col-lg-1 { 
    flex-basis: 8.33333333%; 
    max-width: 8.33333333%; 
}

同樣爲.col-[gridSize]-offset-[offsetNum]看起來像：

.col-xs-offset-1 { 
    margin-left: 8.33333333%; 
} 

.col-md-offset-1 { 
    margin-left: 8.33333333%; 
} 

.col-lg-offset-1 { 
    margin-left: 8.33333333%; 
}

唯一的區別是xs未包裝在媒體查詢中，而sm和md包裝在media queries中。我將這個庫轉換爲css-in-js，如果CSS是相同的，爲什麼包裝它在媒體查詢？

來源

2016-11-12 vamsiampolu

我沒有多少讀到flexboxgrid，但最有可能'xs'不在媒體查詢中，因爲它可能是一個移動的第一個框架，就像Bootstrap一樣。一般的想法是，你根據它在移動設備上的外觀設計進行設計，然後開始構建它（這就是爲什麼它被稱爲**移動第一**）。而不是其他方式，從桌面到移動設備。 – Ricky

我不覺得這需要一個答案，你可以看看[**移動第一**]（http://ux.stackexchange.com/a/35317），如果你有任何疑問，我們來這裏幫幫我。 – Ricky

@Ricky_Ruiz我讀到'％'元素的工作基於父母的寬度，這將是容器流體，如果在'rem'中定義的屏幕或容器佔據整個寬度。你能告訴我更多關於'.col-sm-1'如何與'.container'交互的方法，它的寬度通過'rem'中的媒體查詢來解決嗎？ – vamsiampolu

CSS包裝在媒體查詢中，以便您對每個屏幕分辨率都有不同的行爲。這是響應式設計的孔本質。

xs類未包含在媒體查詢中，因爲它們的樣式將適用於所有屏幕寬度，除非沒有其他任何大小的標記（sm，md，lg）。

來源

2017-09-19 11:37:00

爲什麼flexboxgrid有媒體查詢？

回答

相關問題